Позициониране на CSS блок, Hostinfo
При печата знаете размерите на „крайното устройство“ - лист от книга или вестник, размерите на шрифтовете и картините, възможно е твърдо да се обвърже всеки елемент с неговото място и т.н. При уеб дизайна е точно обратното - посетителите на сайта могат да имат различна резолюция на екрана, те могат да разглеждат вашия сайт, като разширят браузъра на цял екран или минимизират до относително малък прозорец, могат да имат различни шрифтове по подразбиране и различни дълбочини на цветовете; накрая, те могат да изключат изхода на, да речем, снимки - всичко това може да доведе до много забележими изкривявания на вашата дизайнерска идея.
Когато обработвате данни от нормален поток, браузърът извежда данните по ред, добавяйки нов ред, когато се появи блок. Следователно, по-специално, в стандартния HTML няма начин да се организира изходът, например от няколко колони текст, и уеб дизайнерите трябва да използват таблици за това.
Има два начина за позициониране на блок в CSS в нормален поток: относително и статично. Статиката е по подразбиране и прави стандартно форматиране, оставяйки блока в нормалния поток (или, по-просто, той не прави нищо). Relative ви позволява да премествате позицията на блок спрямо позицията, която би имала при нормален поток. Необходимо е да се използва относително преместване с повишено внимание - измества се само блокът, към който принадлежи дефиницията, а останалите се показват както трябва - в резултат на това "изместеният" блок може лесно да припокрива други елементи. Например, текстът по-долу използва стила
позиция: относителна; вляво: 20px; цвят: зелен;
Това е просто текст с една дума, изместена с 20 пиксела.
Обърнете внимание на инструкцията "ляво: 20px" - тя измества позицията на левия ръб на блока с 20 пиксела спрямо предходния елемент в нормален поток, в резултат на това самият блок се измества надясно. Ако посочите отрицателно отместване, тогава блокът ще се премести вляво. По същия начин можете да преместите блока вертикално - за това се използва горното свойство. Можете също да използвате дясно и отдолу, ако е необходимо.
Относителното позициониране има много ограничени приложения, въпреки че понякога може да свърши добра работа. Практиката обаче показва, че щом се опитате да направите нещо по-сложно от обикновена смяна на блок, бързо ще се натъкнете на факта, че различните браузъри показват резултатите от вашата работа по много различни начини и по напълно неразбираеми причини.
Много по-голям интерес представлява абсолютното позициониране. Както подсказва името, тя ви позволява точно да посочите позицията на блока на страницата. При абсолютно позициониране блокът се изважда от нормалния поток и се поставя от браузъра на посоченото от вас място. Например, използвайки описанието