Как правильно использовать 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.
Просмотров: 19612 Комментариев: 27 Рейтинг:
Serg Bonder ()
очень полезная штука
Random ()
Отступы как раз против часовой стрелки идут :)
acerbic[p]ink ()
Random, все верно написано - по часовой.
1 аргумент - отступы будут установлены для всех сторон элемента.
2 аргумента - первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент - от левого и правого.
3 аргумента - первый аргумент задает отступ от верхнего края, второй - одновременно от левого и правого края, а третий - от нижнего края.
4 аргумента - поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
1 аргумент - отступы будут установлены для всех сторон элемента.
2 аргумента - первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент - от левого и правого.
3 аргумента - первый аргумент задает отступ от верхнего края, второй - одновременно от левого и правого края, а третий - от нижнего края.
4 аргумента - поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
Стёпыч ()
2acerbic[p]ink, пост поправил, лишний удалил. Да, есть такое дело в этой CMS - тире в вопросы превращаются.
Vladislav Bibilchuk ()
прикольный дизайн сайта
burnis ()
а мя не радует, а скорее удручает этот CSS -)
особенно бывает смешно когда в ИЕ что-то сдвинулось на 1 пиксел а в опере почему-то на 2 -) и.т.д и.т.в
особенно бывает смешно когда в ИЕ что-то сдвинулось на 1 пиксел а в опере почему-то на 2 -) и.т.д и.т.в
Random ()
acerbic[p]ink, мож у меня конечно стрелка в другую сторону идёт, но верх-право-низ-лево - это против часовой :))
Стёпыч ()
Random, у тебя стрелка идет в другую сторону :)
burnis, да есть такое дело, в разных браузерах по-разному, рекомендую указывать правильный Doctype для html-документа, тогда проблем возникать не должно
burnis, да есть такое дело, в разных браузерах по-разному, рекомендую указывать правильный Doctype для html-документа, тогда проблем возникать не должно
Саша ()
Полезноgovno
я в шоке - ?1 в гугле по запросу position absolute
dilaila
За часовую стрелку отдельное спасибо. Вечно путаю
dilaila
Random (http://random.name)
acerbic[p]ink, мож у меня конечно стрелка в другую сторону идёт, но верх-право-низ-лево - это против часовой :))
по-моему у кого то полный random в голове))
acerbic[p]ink, мож у меня конечно стрелка в другую сторону идёт, но верх-право-низ-лево - это против часовой :))
по-моему у кого то полный random в голове))
Вадим
дизайн сайта - супер!!!
Err
absolut позиционирование работает на разных браузерах по разному. Опера и Ие позиционирует объект относительно родительского объекта, а в мозиле - относительно окна браузера(правильный вариант). И что делать?
Игорь
Position absolute вещь очень удобная согласен...
Но в связи с разным расширением экранов...
Сами понимаете...
Подскажите плиз как отцентровать, что бы блок после применения Position absolute,
оставался всегда на одном и том же месте независимо от расширения экрана?
Но в связи с разным расширением экранов...
Сами понимаете...
Подскажите плиз как отцентровать, что бы блок после применения Position absolute,
оставался всегда на одном и том же месте независимо от расширения экрана?
webkopilka ()
Блина. охуительный у тебя диз. Круто. Я так не умею. Что-бы в спам не поппло - базар по стили CSS )
Ильмир ()
Спасибо! как раз нужна была эта фишка, для установки Геогиевской ленточки на сайт
В поместье ()
Этот блог нашел по запросу position: absolute в гугле %) И очень этому рад!
auditor ()
На вопросы Err и Игоря автор не ответил...
Лена ()
онлайн техно радио
artem
а то если для всех контейнеров на сайте задать "position: absolute" ,типа вот так:
margin: 0px;
padding: 0px;
margin-left:200px;
margin-top:-1700px;
position: absolute;
background:url(...) no-repeat;
height: 221px;
width: 253px;
чтобы не париться???!!!
margin: 0px;
padding: 0px;
margin-left:200px;
margin-top:-1700px;
position: absolute;
background:url(...) no-repeat;
height: 221px;
width: 253px;
чтобы не париться???!!!
Rus ()
Спасибо! Помогло=)
barsukoff ()
А как сделать так, что бы при изменении размеров окна браузера элемент не прыгал?
Денис ()
Абсолютом можно пользоваться не во многих случаях. Одна из проблем - оцентровка объекта. При использовании резиновой верстки, это не так остро чувствуется, как при фиксированной. Есть кривые способы решить эту проблему за счет релятивных дочерних элементов, но варианты не лучшие.
Денис ()
>>barsukoff (http://avtob1og.ru)
А как сделать так, что бы при изменении размеров окна браузера элемент не прыгал?
Я приведу пример скрипта, который растягивает псевдобэкграунд на весь экран, не зависимо от разрешения. Поиграйтесь с ним и можно под свои нужды настроить.
<script>
function apply_bg()
{
var img, X, Y;
if (document.all)
{
img = document.all('bg_image');
X = Math.max(document.body.clientWidth, document.body.scrollWidth);
Y = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
else
{
img = document.getElementById('bg_image');
X = Math.max(innerWidth, document.width );
Y = Math.max(innerHeight, document.height);
}
img.width = X;
img.height = Y;
}
</script>
<body on load ='apply_bg()' onResize='apply_bg()'>
<img id='bg_image' src='bg_image.jpg' style='position: absolute; top:0; left: 0'>
А как сделать так, что бы при изменении размеров окна браузера элемент не прыгал?
Я приведу пример скрипта, который растягивает псевдобэкграунд на весь экран, не зависимо от разрешения. Поиграйтесь с ним и можно под свои нужды настроить.
<script>
function apply_bg()
{
var img, X, Y;
if (document.all)
{
img = document.all('bg_image');
X = Math.max(document.body.clientWidth, document.body.scrollWidth);
Y = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
else
{
img = document.getElementById('bg_image');
X = Math.max(innerWidth, document.width );
Y = Math.max(innerHeight, document.height);
}
img.width = X;
img.height = Y;
}
</script>
<body on load ='apply_bg()' onResize='apply_bg()'>
<img id='bg_image' src='bg_image.jpg' style='position: absolute; top:0; left: 0'>
drcroc ()
прошу прощения у автора, немного переделал статью для себя и в частности добавил про то чтобы элемент не прыгал при изменении окна.
http://gennady-ivanov.blogspot.com/2011/10/position-absolute.html
http://gennady-ivanov.blogspot.com/2011/10/position-absolute.html
Dushanbe ()
Дизайн ппц!