EverGiver

z-index 속성 본문

Front-End (웹)/CSS

z-index 속성

친절한개발초보자 2021. 9. 1. 13:31
728x90
z-index 

 

- html 태그들이 작성할 때 가지고 있는 고유의 z축 값

- html태그들은 우리들 눈에 보이지 않는 z축 값이라는 게 있다. 이 값은 html 태그를 나중에 적으면 적을수록 값이 올라가는 특징이 있는데 태그들을 겹쳐두는 상황이 발생했을 때 가장 마지막에 적은 태그가 가장 위에 있는 이유가 이것 때문이다. (포토샵 레이어 순서랑 동일한 개념)

  • z-index는 css속성이기 때문에 내가 원하는 html태그에 사용해서 우선순위를 바꿀 수 있다.
    (z-index 사용 시 넣어주는 값은 원하는 값을 넣어주면 된다)
  • z-index를 수동으로 넣어주면 z-index가 들어가 있지 않은 태그보다 무조건 상위에 위치하게 된다.
  • 모든 position 속성은 사용하면 position 속성이 들어가 있지 않은 태그보다 무조건 위로 z-index값이 잡힌다.
  • z-index는 아무거나 상관없이 position과 함께 사용을 해야지만 적용이 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>z-index #1</title>
    <style>
        *{margin:0;padding:0;}
        div{width:300px;height:300px;
            color:white;
            text-align:center;
            font-size:25px;
        position:absolute;}
        
        #a{background-color:orange;z-index:1;}
        #b{background-color:blue;left:100px;
            top:100px;z-index:2}
        #c{background-color:black;left:200px;top:200px;z-index:3;}
    </style>
</head>
<body>
    <div id="a">1번상자</div>
    <div id="b">2번상자</div>
    <div id="c">3번상자</div>
</body>
</html>​

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>z-index #2</title>
    <style>
        *{margin:0;padding:0;}
        
        div{width:300px;height:300px;}
        
        #a{background-color:red;position:relative;
            z-index:3;}
        
        #b{background-color:blue;
            margin-top:-100px;margin-left:100px;position:relative;}
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
</html>​

Tip) 중앙 정렬
      - float 속성이 들어가 있으면 margin:0 auto 적용이 안된다.
      - position을 사용해서 margin:0 auto 적용되지 않는 태그를 중앙 정렬을 시키는 방법 ★★★
        ▷ position:absolute(절대좌표 이동) 사용 후 left:50%(고정) margin-left:-대상 태그의 가로 값의 절만을 주면 무조건 어떠한 상황에서도 중앙 정렬이 가능하다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>position을 이용한 중앙정렬</title>
    <style>
        *{margin:0;padding:0;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        
        #a,#b{width:300px;height:300px;float:left;}
        
        #a{background-color:red;}
        
        #b{background-color:blue;
            position:absolute;left:50%;margin-left:-150px;}
        
        #c{width:300px;height:300px;background-color:green;
            margin:50px auto;}
    </style>
</head>
<body>
    <div class="clearfix">
        <div id="a"></div>
        <div id="b"></div>
    </div>
    
    <div id="c"></div>
</body>
</html>
728x90
저작자표시 (새창열림)

'Front-End (웹) > CSS' 카테고리의 다른 글

transform 속성  (0) 2021.09.07
드롭다운 메뉴  (1) 2021.09.01
transition 속성  (0) 2021.08.31
position 속성  (0) 2021.08.25
슬라이드 쇼  (0) 2021.08.25
'Front-End (웹)/CSS' Related Articles more
Comments