html - divs 위치를 상대적으로

Question

질문이 있습니다. 3 개 div가 있습니다. 그들 중 2 명은 배경 이미지가 있어야하며 사용자 영역의 2면에 위치해야합니다. (하나는 오른쪽, 하나는 왼쪽). 세 번째 div는 전체 너비 여야합니다. CSS로 어떻게 할 수 있습니까?

Answer 1

두 div 또는 세 번째 div를 절대적으로 배치하십시오. 다른 두 개보다 더 높은 세 번째 div에 Z- 색인을 지정하십시오.

은 (글쎄, 지금까지의 CSS에 대한 이야기가 예를하지 않고 갈 수)

---

<style> 
    div.holder-for-left-and-right 
    { 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    } 

    div.left 
    { 
    float: left; 
    width: 100px; 
    height: 50px; 
    background: url(...) no-repeat; 
    z-index: 1; 
    } 

    div.right 
    { 
    float: right; 
    width: 100px; 
    height: 50px; 
    background: url(...) no-repeat; 
    z-index: 1; 
    } 

    div.on-top-of-them 
    { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 50px; 
    z-index: 2; 
    } 
    </style> 

<div class="holder-for-left-and-right"> 
    <div class="left">I am leftM</div> 

    <div class="right">I am right</div> 

    <div class="on-top-of-them">I am over them</div> 
</div>