CSS - Divs 오버레이

Question

나는 이것이 일반적인 질문이라고 확신하지만 직접적인 Q-A를 찾을 수없는 것 같습니다.

나는 다음과 같은 구조를 가지고 말 - 내가 itemA에 오버레이 할 itemB를 얻기 위해 구현해야하는 일 CSS 트릭 :

<div id="parent"> 

    <div id="itemA"> 
     Lorem 
    </div> 

    <div id="itemB"> 
     Ipsum 
    </div> 

</div> 

Answer 1

사용이 CSS는 itemA에 itemB 오버레이.

div는 절대적으로 표시되어 페이지의 동일한 위치에 배치되고 itemAiv을 itemB로 대체하려면 itemB의 z- 색인이 itemA보다 커야합니다.

#parent{ 
     width: 100px; 
     height: 100px; 
     position: relative; 
    } 
    #itemA, 
    #itemB{ 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
    #itemB{ 
     z-index: 10; 
    } 

Answer 2

단순히 position: relative/absolute을 적용하고 left/right/top/bottom를 사용하는 것보다 요소를 이동합니다.

relative - 일반적인 DOM 흐름에서 요소를 가져 오지 말고 예약 된 공간을 유지하면 다른 요소를 의미 함 은이 요소 위치에서 영향을받습니다.
absolute - DOM에서 요소를 가져오고 그에게 공간을 예약하지 마십시오. 다른 요소를 의미합니다. 은이 요소 위치에 영향을 미치지 않습니다.

사용 z-index

#itemA { 
 
    background-color: rgba(200, 200, 250, .7); 
 
    position: relative; 
 
    top: 30px; 
 
} 
 
#itemB { 
 
    background-color: rgba(200, 250, 200, .7); 
 
    z-index: 6 
 
}

<div id="parent"> 
 

 
    <div id="itemA"> 
 
    Lorem 
 
    </div> 
 

 
    <div id="itemB"> 
 
    Ipsum 
 
    </div> 
 

 
</div>

Answer 3

이 스타일을 추가 z 방향으로 위치 요소를 이동 (위 또는 아래 스택 일) :

#itemB{ 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0.5; 
} 

Answer 4

당신이 찾고있는 무엇 positioning입니다 .

css에는 "position"이라는 속성이 있으며,이 경우 itemB의 위치를 ​​절대로 설정해야합니다. Absolute는 부모에 상대적으로 배치된다는 것을 의미합니다 (부모에게 position : relative를 설정해야합니다. 그렇지 않으면 부모가 작동하지 않습니다).

그리고 나서 위쪽, 아래쪽, 왼쪽, 오른쪽으로 설정할 수 있습니다. {픽셀 수} px; 그러나 당신이 원하는대로 그것을 배치하십시오. 이 경우 itemA는 itemB에 전혀 영향을주지 않습니다.