Позиционирование CSS: абсолютное/относительное наложение

Question

Я создал следующее, чтобы проиллюстрировать мой вопрос.

#container{ 
 
    background-color:white; 
 
    position:relative; 
 
} 
 
#absolute{ 
 
    position:absolute; 
 
    height:100%; 
 
    width:100%; 
 
    background-color:black; 
 
} 
 

 
#relative{ 
 
    position:relative; 
 
    background-color:blue; 
 
    width:200px; 
 
} 
 

 
#content{ 
 
    background-color:green; 
 
    height:50px; 
 
    width:50px; 
 
}

<div id="container"> 
 
\t <div id="absolute"></div> 
 
\t <div id="relative"> 
 
\t \t <div id="content"></div> 
 
\t </div> 
 
</div>

Так что я понимаю следующее: 1) DIV контента размером в 50px, поэтому содержащие дивы (относительные) также имеет высоту 50px. Весь путь до контейнера, поэтому бар является равномерным 50 пикселей по всему экрану.

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

Что я не понимаю: 1) Если я удаляю относительный тег из относительного элемента, он исчезает за абсолютным элементом. Даже если я устанавливаю более высокий z-индекс на относительный элемент, он не отображается.

#container{ 
 
    position:relative; 
 
} 
 

 
#absolute{ 
 
    position:absolute; 
 
    height:90%; 
 
    width:100%; 
 
    background-color:black; 
 
    z-index:1; 
 
} 
 
#relative{ 
 
    //position:relative; 
 
    background-color:blue; 
 
    width:200px; 
 
    z-index:2; 
 
    color:white; 
 
} 
 

 
#content{ 
 
    background-color:green; 
 
    height:50px; 
 
    width:50px; 
 
}

<div id="container"> 
 
\t <div id="absolute"></div> 
 
\t <div id="relative"> 
 
\t \t <div id="content">Test</div> 
 
\t </div> 
 
</div>

2) Абсолютный элемент 50px высокого без содержания из-за 100%, но если дать ему содержание, он остается на 50px, даже если содержание будет переполнение.

#container{ 
 
    background-color:white; 
 
    position:relative; 
 
} 
 
#absolute{ 
 
    position:absolute; 
 
    height:100%; 
 
    width:100%; 
 
    background-color:black; 
 
    color:white; 
 
    z-index:2; 
 
} 
 

 
#relative{ 
 
    position:relative; 
 
    background-color:blue; 
 
    width:200px; 
 
} 
 

 
#content{ 
 
    background-color:green; 
 
    height:50px; 
 
    width:50px; 
 
}

<div id="container"> 
 
\t <div id="absolute"> 
 
     Test<br/>Test<br/>Test<br/>Test 
 
\t </div> 
 
\t <div id="relative"> 
 
\t \t <div id="content"></div> 
 
\t </div> 
 
</div>

Может кто-нибудь объяснить, что это правило, что позволяет этим элементам вести себя таким образом. Большое спасибо.

Answer 1

Чтобы ответить на первый вопрос:

Если удалить относительный тег из относительного элемента, он исчезает за абсолютный элементом. Даже если я устанавливаю более высокий z-индекс на относительный элемент, он не отображается.

Это потому, что позиция по умолчанию position:static и это означает, что регистр не все инструкции позиционирования, включая z-index,

в этом случае, если вы установите #absolute с z-index отрицательным значением будет идти на более низком уровне:

#container{ 
 
    position:relative; 
 
} 
 

 
#absolute{ 
 
    position:absolute; 
 
    height:90%; 
 
    width:100%; 
 
    background-color:black; 
 
    z-index:-11; 
 
} 
 
#relative{ 
 
    //position:relative; 
 
    background-color:blue; 
 
    width:200px; 
 
    z-index:2; 
 
    color:white; 
 
} 
 

 
#content{ 
 
    background-color:green; 
 
    height:50px; 
 
    width:50px; 
 
}

<div id="container"> 
 
\t <div id="absolute"></div> 
 
\t <div id="relative"> 
 
\t \t <div id="content">Test</div> 
 
\t </div> 
 
</div>

---

, как на вопрос 2:

с height:100% она расширяется до высоты родителя;