[CSS] position 속성에 따른 요소 쌓임(z-index) 순서

다음 코드와 같이 'static' 요소와 'absolute' 요소를 혼합해서 사용하는 경우에 'static' 요소가 'absolute' 요소보다 앞으로 와야하는 상황이 있었다. 그러나 'static'요소에 아무리 'z-index'를 두어도 앞으로 배치되지 않았다.

 

<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .container {
        position: relative;
        width: 100%;
        height: 800px;
        background-color: lightgray;
        border-bottom: 1px solid black;
    }
    
    .test-box {
        width: 300px;
        height: 100px;
        color: white;
        text-align: center;
        line-height: 100px;
    }

    .test-static {
        /* default position static */
        background-color: blue;
        z-index: 100;
    }

    .test-absolute {
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    
</style>

<div class="container">
    <div class="test-box test-static">static</div>
    <div class="test-box test-absolute">absolute</div>
</div>

 

이 경우 position을 'static'에서 'relative'으로 변경해주면 된다.

<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .container {
        position: relative;
        width: 100%;
        height: 800px;
        background-color: lightgray;
        border-bottom: 1px solid black;
    }
    
    .test-box {
        width: 300px;
        height: 100px;
        color: white;
        text-align: center;
        line-height: 100px;
    }

    .test-static {
        position: relative;
        background-color: blue;
        z-index: 100;
    }

    .test-absolute {
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    
</style>

<div class="container">
    <div class="test-box test-static">static</div>
    <div class="test-box test-absolute">absolute</div>
</div>

 

 

---

 

 

요소가 쌓이는 순서가 어떻게 되는지 궁금하여 다음과 같이 코드를 만들어서 테스트를 해봤다.

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 100%;
        height: 800px;
        background-color: lightgray;
        border-bottom: 1px solid black;
    }

    .test-box {
        width: 300px;
        height: 100px;
        color: white;
        text-align: center;
        line-height: 100px;
    }
    
    .test-fixed {
        background-color: orange;
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
    }

    .test-sticky {
        background-color: green;
        position: sticky;
        width: 95%;
        top: 50px;
        left: 0px;
    }

    .test-absolute {
        background-color: purple;
        position: absolute;
        top: 75px;
        left: 150px;
    }

    .test-relative {
        background-color: palevioletred;
        position: relative;
        top: 25px;
        left: 0px;
    }
    
    .test-relative .test-absolute {
        background-color: hotpink;
        top: 0px;
        left: 250px;
    }

    .test-static {
        background-color: blue;
        position: static;
        width: 30%;
    }
</style>

<div class="container">
    <div class="test-box test-fixed">1. fixed</div>
    <div class="test-box test-sticky">2. sticky</div>
    <div class="test-box test-relative">3. relative
        <div class="test-box test-absolute">3-A. absolute in test-relative</div>
    </div>
    <div class="test-box test-absolute">4. absolute</div>
    <div class="test-box test-static">5. static</div>
</div>
<div class="container"></div>
<div class="container"></div>

• 'static' 요소는 가장 뒤에 위치한다.
• 'static'을 제외한 나머지 요소는 기입한 순서대로 쌓인다.

 

z-index 속성값을 통해 요소 순서가 어떻게 배치되는지 확인해보았다.

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 100%;
        height: 800px;
        background-color: lightgray;
        border-bottom: 1px solid black;
    }

    .test-box {
        width: 300px;
        height: 100px;
        color: white;
        text-align: center;
        line-height: 100px;
    }
    
    .test-fixed {
        background-color: orange;
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 5;
    }

    .test-sticky {
        background-color: green;
        position: sticky;
        width: 95%;
        top: 50px;
        left: 0px;
        z-index: 4;
    }

    .test-absolute {
        background-color: purple;
        position: absolute;
        top: 75px;
        left: 150px;
        z-index: 3;
    }

    .test-relative {
        background-color: palevioletred;
        position: relative;
        top: 30px;
        left: 0px;
        z-index: 2;
    }
    
    .test-relative .test-absolute {
        background-color: hotpink;
        top: 0px;
        left: 250px;
        z-index: 100;
    }

    .test-static {
        background-color: blue;
        position: static;
        width: 30%;
        z-index: 1000;
    }
</style>

<div class="container">
    <div class="test-box test-fixed">1. fixed</div>
    <div class="test-box test-sticky">2. sticky</div>
    <div class="test-box test-relative">3. relative
        <div class="test-box test-absolute">3-A. absolute in test-relative</div>
    </div>
    <div class="test-box test-absolute">4. absolute</div>
    <div class="test-box test-static">5. static</div>
</div>
<div class="container"></div>
<div class="container"></div>

• 'static'에 z-index속성을 제일 높게 두어도 가장 뒤에 위치한다.
• 같은 레벨의 요소들은 z-index가 높을 수록 앞에 위치한다.
• z-index가 낮은 부모 요소의 자식은 z-index값이 높아도 앞에 위치할 수 없다.