CSS

[CSS] z-index

효땡 2024. 6. 1. 20:21

z-index

- 레이어 순서를 정함

- 숫자가 클수록 앞으로 옴

<!DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
            #aa{
                background-color: darkmagenta;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index:3;}
            #bb{
                background-color: lightseagreen;
                width: 80px;
                height: 200px;
                position: absolute;
                left:0;
                top: 0;
                z-index: 5;}
            #cc{
                background-color: sienna;
                width: 60px;
                height: 300px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;}
        </style>
    </head>
        
    <body>
        <div id="aa"></div>
        <div id="bb"></div>
        <div id="cc"></div>
    </body>
</html>

 

- 레이어 순서 정하기 (가장 큰 수가 위로, 레이어 순서값은 음수도 허용)