Как вставлять поля css с относительным позиционированием и абсолютным позиционированием

Question

Скажем, у меня есть три коробки для гнезда. A, B и C. Я хочу, чтобы они были вложены таким образом, что C находится внутри, но позиции относительно B, B находятся внутри, но позиции относительно A и позиции A относительно браузера. Я понимаю в общих случаях, когда мне нужно всего лишь вложить два из них, скажем B внутри A, я могу сделать позицию A: относительную и позицию B: абсолютную. Таким образом, я вставляю поле B внутри A и корректирую его положения в области A. Однако в случае трех ящиков (или даже больше), как я могу их разместить таким образом?

На картинке. мой желаемый эффект был бы следующим. Так что B ограничен области в пределах А, В и С ограничена в пределах области B

Answer 1

Использование position:relative; на внешнем родителю - в вашем случае А.

Затем поместите все другие дивы с помощью position:absolute и установите смещение с использованием top, bottom, left и right объектов. Каждый <div> будет автоматически относиться к его прямому родительскому объекту. Working jsFiddle example

HTML:

<div id="a"> 
    <div id="b"> 
     <div id="c"></div> 
    </div> 
</div> 

CSS:

#a{ 
    position:relative; 
    width:200px; 
    height:200px; 
    background:red; 
} 

#b{ 
    position:absolute; 
    top:75px; 
    left:100px; 
    background:cyan; 
    width:75px; 
    height:100px; 
} 

#c{ 
    position:absolute; 
    background:white; 
    top:10px; 
    left:10px; 
    width:40px; 
    height:40px; 
} 

Answer 2

, установив положение абсолютного, ваше позиционирование его ближайшим расположенным родителем.

от MDN:

поместите его в заданном положении по отношению к своему ближайшему позиционированному предку

, что означает, что если «А» и «Б» устанавливают к абсолютному, его же, как «A» устанавливает относительные , а «B» устанавливает абсолютное значение, как в вашем примере.