>

2 개의 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;
}

  • 답변 # 1

    먼저, 절대적으로 배치 된 요소에 대한 위치를 포함해야합니다. 그렇지 않으면 이상하고 혼란스러운 동작이 발생합니다. 아마 top: 0; left: 0 를 추가하고 싶을 것입니다  절대적으로 배치 된 요소 모두에 대해 CSS에. 당신은 또한 position: relative 를 갖고 싶어   .container_row 에서  문서의 본문이 아닌 부모에 대해 절대적으로 배치 된 요소를 배치하려는 경우 :

    와이즈 비즈

    문제는 그

    If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...

    입니다  정상 흐름에서 요소를 제거합니다 :

    와이즈 비즈

    즉, 절대 위치 요소는 부모 요소의 크기와 첫 번째 position: absolute 에 영향을 미치지 않습니다.  높이가 0입니다.

    따라서 얼마나 키가 큰지 알지 않는 한 절대적으로 위치 된 요소로 수행하려는 작업을 수행 할 수 없습니다 (또는 그에 따라 높이를 지정할 수 있음). 높이를 지정할 수 있으면

    It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes.

    에 동일한 높이를 넣을 수 있습니다  그리고 모든 것이 줄을 섰다. 당신은 또한 <div class="container_row"> 를 넣을 수 있습니다  두 번째 .container_row 에  절대 위치 요소를위한 공간을 남겨 두십시오. 예를 들면 다음과 같습니다.

    와이즈 비즈

  • 답변 # 2

    대답, "mu가 너무 짧다". 나는 똑같은 것을 찾고 있었고, 게시물을 읽은 후 내 문제에 맞는 해결책을 찾았습니다.

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

    margin-top
    
    

    마지막 요소에서만

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

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

  • 답변 # 3

    실제로 이것은 위치 .container_row 없이 가능합니다  높이를 지정하십시오.필요한 것은

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

    를 사용하는 것입니다.  부모 요소와 하위 항목을 같은 행과 열에 넣습니다.

    HTML에 따라 아래 예를 확인하십시오. position: absolute; top: 0px; left: 0px; 만 추가했습니다.  일부 색상으로 결과를 볼 수 있습니다.

    absolute 도 쉽게 변경할 수 있습니다  각 자손 요소는 가시성을 조작합니다 (하나는 위에 있어야 함).

    display: grid
    
    

    <span>
    
    

  • 답변 # 4

    설정해야했습니다

    컨테이너 _ 높이 = Element1_height = Element2_height

    z-index
    
    

    z-index를 사용하여 어느 것을 위에 놓을지를 설정할 수 있습니다.

  • 답변 # 5

    위치 : 절대 또는 표시 : 그리드 대신 display : flex를 사용하는 또 다른 솔루션이 있습니다.

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

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

관련 자료

  • 이전 swift - 누르면 볼 바운스
  • 다음 django : 장고 템플릿 DoesNotExist?