[css] CSS : 높이를 지정하지 않고 두 요소를 서로 위에 배치하는 방법은 무엇입니까?

우선, 절대적으로 배치 된 요소에 대한 위치를 포함해야합니다. 그렇지 않으면 이상하고 혼란스러운 행동을 보게 될 것입니다. top: 0; left: 0절대적으로 배치 된 두 요소 모두에 대해 CSS에 추가하고 싶을 것입니다 . 당신은 또한이 할 수 있습니다 position: relative에 .container_row당신이 절대 위치 요소를 배치 할 것인지 가 아니라 문서의 몸보다 더 상위에 관하여 :

요소에 ‘위치 : 절대’가있는 경우 ‘위치’가 ‘절대’, ‘상대’또는 ‘고정’인 가장 가까운 조상이 포함하는 블록을 설정합니다.

문제는 position: absolute정상적인 흐름에서 요소 를 제거 한다는 것입니다 .

정상적인 흐름에서 완전히 제거됩니다 (나중의 형제에 영향을주지 않음). 절대적으로 배치 된 상자는 정상 흐름 하위 및 절대적으로 (고정되지 않은) 배치 된 하위 항목에 대한 새 포함 블록을 설정합니다. 그러나 절대 위치 요소의 내용은 다른 상자 주위로 흐르지 않습니다.

즉, 절대 위치 요소는 부모 요소의 크기에 영향을주지 않으며 첫 번째 요소의 <div class="container_row">높이는 0입니다.

따라서 높이가 얼마나 될지 (또는 동등하게 높이를 지정할 수 있음) 알지 못하는 한 절대 위치 요소로하려는 작업을 수행 할 수 없습니다. 높이를 지정할 수 있다면에 동일한 높이를 지정할 수 .container_row있으며 모든 것이 정렬됩니다. 당신은 또한을 넣을 수있는 margin-top두 번째에 .container_row절대적으로 배치 요소에 대한 공간을 확보 할 수 있습니다. 예를 들면 :

http://jsfiddle.net/ambiguous/zVBDc/

답변

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1 span{
  color: #fff;
  background: #000cf6;
}

.layer2{
  background: rgba(255, 0, 0, 0.4);
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...<br>Test test</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

position: absolute;
top: 0px;
left: 0px;

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

.stack {
    display: grid;
}
.stack > * {
    grid-row: 1;
    grid-column: 1;
}