Для чего нужна позиция: относительно полезна? - PullRequest
Новая
       8

Для чего нужна позиция: относительно полезна?

6 голосов
/ 23 февраля 2010

Сегодня я думал о CSS-режимах позиционирования и понял, что никогда не использую position:relative для чего-либо, кроме как заставить position:absolute работать с дочерними элементами.

Я больше "разработчик", чем "дизайнер", но за эти годы я сделал довольно много CSS-макетов. Я использовал таблицы, значения с плавающей точкой, поля (положительные и отрицательные), позиция: абсолютная и даже позиция: фиксированная, но я не думаю, что у меня когда-либо был случай, когда я использовал позицию: относительную для фактического позиционирования элемент.

Есть ли какая-то замечательная техника CSS-гуру, которая полагается на положение: относительное (и используется в реальных проектах)? Я пропускаю?

Ответы [ 5 ]

6 голосов
/ 23 февраля 2010

Это полезно, если вы хотите сместить элемент, не суетясь с полями и его последствиями для других элементов. Допустим, вы хотите, чтобы изображение было намеренно выдвинуто из стороны контейнера и (почти) перекрывалось с некоторым содержимым в контейнере рядом с ним. 

------------- -----
|           | |   |
|   X  -------| Y |
|      |  a  ||   |
|      -------|   |
------------- -----

Контейнер a является частью обычного текстового потока X, и вы хотите сохранить его таким, вы просто хотите, чтобы он немного высовывался из стороны в качестве аккуратного эффекта. Если вы сделаете это с полями, это может стать очень грязным и переформатировать некоторые другие ваши материалы.
Используя position: relative; left: 10px;, вы можете легко получить этот эффект без побочных эффектов.

6 голосов
/ 23 февраля 2010

В прошлом я использовал posotion: relative для элемента контейнера с абсолютно позиционированными элементами внутри него (например, центрированный макет из трех столбцов). Например:

alt text

Я не даю контейнеру никакого смещения, но расположение его с помощью position: relative позволяет мне абсолютно позиционировать столбцы относительно контейнера. Если для контейнера установлено значение position: static, как по умолчанию, столбцы будут абсолютно позиционированы относительно окна просмотра браузера, а не контейнера.

2 голосов
/ 23 февраля 2010

Я использую position:relative;, чтобы надстрочные символы все еще могли подниматься выше vertical-align: top;, но не позволяли им возиться с началом моих абзацев. 

sup { 
    font-size: .7em;
    vertical-align: top;
    position: relative;
    top: -.1em;
}
1 голос
/ 23 февраля 2010

Я в основном использую его, когда хочу позиционировать некоторый абсолютный элемент относительно его родительского элемента. В этом случае родительский элемент должен быть установлен на position: relative. Вот где это.

Кроме того, я также использую его здесь и там, чтобы исправить ошибки, связанные с мерцанием / мерцанием IE6 / 7 в элементах блока с фоновым изображением.

1 голос
/ 23 февраля 2010

Я использовал его несколько раз для отображения таких вещей, как изображения заголовков, например: 

<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); }

В этом случае заголовок имеет большую полосу на всем протяжении в качестве фонового изображения, логотип находится на полосе с небольшим смещением. Я думаю, что в некоторых случаях проще, чем отступы / отступы, чтобы немного изменить положение вещей, возможно, это просто мнение.

...