티스토리 뷰

CSS

z-index

placidcy 2022. 4. 17. 16:14

z축 정렬 / 숫자가 클수록 작은 값을 가진 요소보다 z축 앞으로 이동한다

 

 


    <style>
        .container {
            display: flex;
            position: relative;
        }

        .div1 {
            z-index: 0;
            background-color: black;
            position: absolute;
            top: 30px;
            left: 30px;
            width: 100px;
            height: 100px;
        }

        .div2 {
            z-index: 1;
            background-color: rgb(73, 114, 80);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
   <div class="container">
        <span class="div1"></span>
        <span class="div2"></span>
    </div>
</pre></code>

'CSS' 카테고리의 다른 글

box-sizing  (0) 2022.04.17
white-space  (0) 2022.04.17
align-self  (0) 2022.04.12
flex-shrink  (0) 2022.04.12
flex-grow  (0) 2022.04.12

UP NEXT : CSS

댓글
© 2018 webstoryboy