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

정확히 서로 위에 배치해야하는 두 개의 DIV가 있습니다. 그러나 그렇게하면 포함 DIV가 높이가없는 것처럼 작동하기 때문에 서식이 모두 망가집니다. 나는 이것이 예상되는 동작이라고 생각 position:absolute하지만이 두 요소를 서로 위에 배치하고 콘텐츠가 늘어남에 따라 컨테이너가 늘어나도록하는 방법을 찾아야합니다.

의 왼쪽 상단 가장자리는의 왼쪽 상단 가장자리에 .layer2정확히 정렬되어야합니다.layer1

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </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>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}

우선, 절대적으로 배치 된 요소에 대한 위치를 포함해야합니다. 그렇지 않으면 이상하고 혼란스러운 행동을 보게 될 것입니다. 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/

실제로 이것은 위치 absolute와 높이를 지정 하지 않고도 가능합니다 . 해야 할 일은 display: grid부모 요소를 사용 하고 하위 요소를 동일한 행과 열에 넣는 것입니다.

귀하의 HTML을 기반으로 아래의 예를 확인하십시오. <span>몇 가지 색상 만 추가 했으므로 결과를 볼 수 있습니다.

또한 z-index각 하위 요소를 쉽게 변경 하여 가시성을 조작 할 수 있습니다 (위에 있어야 함).

.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>

좋은 대답은 "mu is too short"입니다. 나는 똑같은 것을 찾고 있었고 귀하의 게시물을 읽은 후 내 문제에 맞는 해결책을 찾았습니다.

나는 정확히 같은 크기의 두 요소를 가지고 있었고 그것들을 쌓고 싶었습니다. 크기가 같기 때문에 제가 할 수있는 것은

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

마지막 요소에만. 이렇게하면 첫 번째 요소가 올바르게 삽입되어 상위 높이를 "밀고"두 번째 요소가 맨 위에 배치됩니다.

이것이 같은 (알 수없는) 높이로 2 개 이상의 요소를 쌓으려는 다른 사람들에게 도움이되기를 바랍니다.

여기에 display : flex 대신 position : absolute 또는 display : grid를 사용하는 또 다른 솔루션이 있습니다.

.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_height = Element1_height = Element2_height

.Container {
    position: relative;
}

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

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

Z- 색인을 사용하여 맨 위에있을 항목을 설정할 수 있습니다.

다음은 사용하지 않고 각 요소의 높이를 유지하는 재사용 가능한 CSS입니다 position: absolute.

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

첫 번째 요소 stack는 배경이고 두 번째 요소 는 전경입니다.

절대 위치 지정으로 인해 문서 흐름 위치에서 요소 제거 : absolute는 작업에 적합한 도구가 아닙니다. 생성하려는 정확한 레이아웃에 따라 네거티브 여백, 위치 : 상대 또는 변환 : 번역을 사용하여 성공할 수 있습니다. 원하는 작업의 샘플을 보여 주시면 더 나은 서비스를 제공 할 수 있습니다.

물론 문제는 키를 되 찾는 것입니다. 하지만 미리 높이를 모르는 경우 어떻게 할 수 있습니까? 음, 컨테이너에 제공하려는 가로 세로 비율을 알고 있다면 (그리고 반응 형으로 유지), 백분율로 표시되는 컨테이너의 다른 자식에 패딩을 추가하여 높이를 되돌릴 수 있습니다.

div컨테이너에 더미 를 추가하고 다음과 같이 설정할 수도 있습니다.padding-top: 56.25% 하고 더미 요소에 컨테이너 너비의 비율 인 높이를 제공하는 것을 . 이것은 컨테이너를 밀어 내고 가로 세로 비율을 제공합니다 (이 경우 16 : 9 (56.25 %)).

패딩과 여백은 너비의 백분율을 사용합니다. 이것이 바로 여기서 트릭입니다.

많은 테스트를 거친 후 원래 질문이 이미 옳다는 것을 확인했습니다. 몇 가지 설정이 누락되었습니다.

• 그만큼 container_row 가져야한다position: relative;
• 아이들은 (...), 있어야합니다 position: absolute; left:0;
• 자식 (...)이 서로 정확히 정렬되도록하려면에 container_row추가 스타일 이 있어야합니다.
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center; 도움이 될 수도 있습니다.