나의 개발일지

z-index에 대하여~ 본문

CSS

z-index에 대하여~

heew0n 2023. 10. 12. 10:30
z-index 속성은
요소의 쌓임 순서(stack order)를 정의할 수 있다
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며
위치 지정 요소에 대해 적용할 수 있는 속성이다

 

 

 

 

동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 된다

z-index의 기본값은 auto!

auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width: 100px; height: 100px; position: relative;}
        div:nth-child(1) {background-color: yellow;}
        div:nth-child(2) {background-color: lightgreen; bottom: 50px;}
        div:nth-child(3) {background-color: darkblue ;bottom: 100px;}
        div:nth-child(4) {background-color: darkgoldenrod; bottom: 150px;}
    </style>
</head>
<body>
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="fourth">4</div>
</body>
</html>

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width: 100px; height: 100px; position: relative;}
        div:nth-child(1) {background-color: yellow;}
        div:nth-child(2) {background-color: lightgreen; bottom: 50px;}
        div:nth-child(3) {background-color: darkblue ;bottom: 100px;}
        div:nth-child(4) {background-color: darkgoldenrod; bottom: 150px;}
    
        .first{z-index: 1;}
        .second{z-index: 0;}
        
        /* second가 first보다 밑에 있으므로 second가 사라지고 first가 위로 올라온다 */
        
    </style>
</head>
<body>
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="fourth">4</div>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width: 100px; height: 100px; position: relative;}
        div:nth-child(1) {background-color: yellow;}
        div:nth-child(2) {background-color: lightgreen; bottom: 50px;}
        div:nth-child(3) {background-color: darkblue ;bottom: 100px;}
        div:nth-child(4) {background-color: darkgoldenrod; bottom: 150px;}
    
        .first{z-index: 1;}
        .second{z-index: 2;}
        .third{z-index: 3;}
        .fourth{z-index: 4;}
        
        /*정수를 입력하여 순서대로 쌓이도록 한다*/
        
    </style>
</head>
<body>
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="fourth">4</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width: 100px; height: 100px; position: relative;}
        div:nth-child(1) {background-color: yellow;}
        div:nth-child(2) {background-color: lightgreen; bottom: 50px;}
        div:nth-child(3) {background-color: darkblue ;bottom: 100px;}
        div:nth-child(4) {background-color: darkgoldenrod; bottom: 150px;}
    
        .first{z-index: 4;}
        .second{z-index: 3;}
        .third{z-index: 2;}
        .fourth{z-index: 1;}
        
        
        /*큰 정수부터 주면 역순으로 쌓임*/
    </style>
</head>
<body>
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="fourth">4</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

상속(Inheritance)에 대하여~  (0) 2023.10.11
의사(가상)클래스에 대하여~  (0) 2023.10.11
의사요소/after/before/first-line/marker/placeholder  (0) 2023.10.11
특성 선택자와 결합선택자에 대하여~  (0) 2023.10.10
float과 clear에 대하여~  (0) 2023.10.10
'CSS' Related Articles more