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

Question

В соответствии с W3Schools (http://www.w3schools.com/css/css_positioning.asp):

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

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

Answer 1

Хорошим примером может быть то, когда вы хотите поместить что-то на страницу или «родственник» в контейнер/div.

Вот мой Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/

Это показывает, что без абсолютного DIV будучи внутри «относительной» DIV содержимое прижаты к телу документа.

Обратите внимание, что зеленый DIV (#box1), который имеет position: relative, то внутри DIV (#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; 
} 

---

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

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

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

Answer 2

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

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

Answer 3

Что другие ответы не в явном виде состояние заключается в следующем:

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

Элемент с абсолютным положением и

верх: 10px;

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