Абсолютное позиционирование внутри относительного позиционирования?

Question

Согласно W3Schools ( http://www.w3schools.com/css/css_positioning.asp):

Относительно позиционированные элементы часто используются в качестве контейнерных блоков для абсолютно позиционированных элементов.

Почему это? Есть хороший пример?

Answer 1

Хороший пример - когда вы хотите разместить что-то на странице или "относительно" контейнера / div.

Вот моя скрипка http://jsfiddle.net/doitlikejustin/RdWQ7/2/

Это показывает, что без абсолютного div внутри "относительного" div содержимое выравнивается по телу документа.

Обратите внимание, что зеленый div (#box1), у которого есть position: relativeДив внутри (#inner1) он выровнен сверху / справа ВНУТРИ #box1,

Синяя коробка (#box2), который имеет точно такой же HTML-макет, как зеленое поле (#box1), не включает в себя position: relative и обратите внимание, что div внутри него (#inner2) выровнен по верхнему / правому краю body

#box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    position: absolute;
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}

---

Вот хорошая статья об этом от Криса Койера...

Элемент страницы с относительным позиционированием дает вам возможность абсолютно точно позиционировать дочерние элементы внутри него.

Источник: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

То, что другие ответы явно не утверждают, это:

Абсолютное позиционирование измеряется у ближайшего предка, который не имеет статического позиционирования. Предоставление предку относительного позиционирования является лишь средством для достижения этой цели. Это не должно быть относительным, это просто не может быть статичным.

Элемент с абсолютной позицией и

топ:10px;

будет в 10 пикселях от вершины ближайшего предка, положение которого не является статичным.

Answer 3

Если элемент с абсолютным позиционированием отсутствует в относительном элементе, тогда, когда вы устанавливаете значение top, left, right или bot со значением, он будет перемещать элемент абсолютного положения из тела на это значение. Что это значит? Например, если вы установите атрибут элемента top с абсолютной позицией top, равный 10px, он вытолкнет элемент на 10 пикселей сверху экрана.

Если элемент абсолютной позиции находится в относительном элементе, то, когда вы устанавливаете top, left, right или bot со значением, он будет перемещать элемент абсолютной позиции из этого относительного элемента на это значение. Что это значит? Например, если вы установите атрибут элемента top с абсолютной позицией top, равный 10px, он вытолкнет элемент на 10 пикселей от вершины относительного элемента. Там вы можете перемещать относительный элемент вокруг, и элемент с абсолютным позиционированием внутри него всегда будет в 10 пикселях от вершины относительного элемента.