Для чего position:relative полезный?
Я думал о режимах расположения CSS сегодня и понял, что никогда не использую position:relative для чего-либо кроме создания position:absolute работа над дочерними элементами.
Я - больше "разработчика", чем "разработчик", но я сделал довольно много основанных на CSS разметок за эти годы. Я использовал таблицы, плавание, поля (положительный и отрицательный), position:absolute, и даже position:fixed, но я не думаю, что у меня когда-либо был случай, где я использовал position:relative для того, чтобы на самом деле расположить элемент.
Есть ли некоторый большой метод гуру CSS, который полагается на position:relative (и используется в реальных проектах)? Я пропускаю?
5 ответов
Это полезно, если вы хотите сместить элемент, не теряя поля и последствия для других элементы. Предположим, вы хотите намеренно сделать так, чтобы изображение выглядывало из стороны контейнера и (почти) перекрывалось некоторым содержимым в контейнере рядом с ним.
------------- -----
| | | |
| X -------| Y |
| | a || |
| -------| |
------------- -----
Контейнер a является частью обычного текстового потока X , и вы хотите, чтобы он оставался таким, вы просто хотите, чтобы он выглядывал сбоку в качестве аккуратного эффекта. . Если вы сделаете это с полями, это может стать действительно беспорядочным и переформатировать часть вашего другого контента.
Используя position: relative; left: 10px; вы можете легко получить этот эффект без побочных эффектов.
В прошлом я использовал posotion: relative для элемента контейнера с абсолютно позиционированными элементами внутри него (например, центрированный трехколоночный макет). Например:
Я не даю контейнеру никакого смещения, но позиционирование его с помощью position: relative позволяет мне абсолютно позиционировать колонки относительно контейнера. Если контейнер установлен в position: static, как по умолчанию, то колонки будут абсолютно позиционированы относительно области просмотра браузера, а не контейнера.
Я не раз использовал его для отображения таких вещей, как изображения заголовков, что-то вроде:
<div id="header">
<div id="logo"></div>
<div>
CSS:
#header { width: 1024px; margin: 0 auto; background: url(string.jpg); }
#logo { position: relative; left: 40px; background: url(logo.jpg); }
В этом случае заголовок имеет большую полосу по всей длине в качестве фонового изображения, логотип располагается в полосе, только немного смещен. В некоторых случаях это проще, чем padding/margin, чтобы немного сместить материал, я думаю, может быть, это просто мнение.
Я в основном использую его, когда хочу расположить некоторый абсолютный элемент относительно его родительского элемента. В этом случае для родительского элемента необходимо установить значение position: relative . Вот где это нужно.
Кроме того, я также использую его кое-где для исправления ошибок IE6 / 7 haslayout / мерцания в блочных элементах с фоновым изображением.
Я использую position:relative;, чтобы надстрочные символы могли подниматься выше vertical-align: top;, но это не позволяет им нарушать расположение абзацев.
sup {
font-size: .7em;
vertical-align: top;
position: relative;
top: -.1em;
}