Как правильно использовать position: absolute?
Новость опубликована: 23 июня 2008 в категории: Разговоры о всякой йухнеЕсть такая полезная штука в CSS - position: absolute; она не раз меня выручала в ситуациях, когда в вёрстке сайта разбираться времени нет, а расположить какой-либо элемент нужно именно в определенном месте.
Вот сами подумайте: верстку сайта делали не вы, расположили баннер - пол сайта разъехалось, надо все собирать заново и т.п. Короче это головняк, я предпочитаю сначала расположить элемент абсолютным позиционированием.
Пишем нечто подобное:
#test {
position: absolute;
right: 5%;
top:200px;
width: 200px;
height: 200px;
...
}
Комментарии излишни.
Дальше вставляем всё это на сайт в виде: <div id='#test'>кусок кода</div> и радуемся жизни.
Еще одна CSS-фича, которая часто выручает - отрицательные отступы. К примеру, margin:10px 20px 30px -80px; расположит элемент на 80 пикселей влево. Если не можете запомнить, какая цифра за что отвечает, вспомните часы, - отступы идут по часовой стрелке, 10px - top, 20px - right, 30px - bottom, -80px - left.
Serg Bonder ()
Random ()
acerbic[p]ink ()
1 аргумент - отступы будут установлены для всех сторон элемента.
2 аргумента - первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент - от левого и правого.
3 аргумента - первый аргумент задает отступ от верхнего края, второй - одновременно от левого и правого края, а третий - от нижнего края.
4 аргумента - поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
Стёпыч ()
Vladislav Bibilchuk ()
burnis ()
особенно бывает смешно когда в ИЕ что-то сдвинулось на 1 пиксел а в опере почему-то на 2 -) и.т.д и.т.в
Random ()
Стёпыч ()
burnis, да есть такое дело, в разных браузерах по-разному, рекомендую указывать правильный Doctype для html-документа, тогда проблем возникать не должно