티스토리 뷰

수업/└HTML&CSS

[CSS]박스_레이아웃 속성 : z-index

onlyun 2022. 1. 3. 16:22

 

position이 static이 아닐 때(static이면 위치값 안 먹히니까.)

relative, absolute, fixed에서 이용

 

한 요소 위에 다른 요소를 쌓을 때 사용

z-index 속성값이 클수록 위쪽으로 배치.

속성값에 음수도 가능.

 

<style>
    #box1 {
        z-index:3; /* 3개 중 맨 위에 배치 */
    }
    #box2 {
        z-index:2; /* 3개 중 맨 2번째 배치 */
    }
    #box3 {
        z-index:1; /* 3개 중 맨 밑에 배치 */
    }
</style>
<body>
    <div id="box1"> BOX_1 </div>
    <div id="box2"> BOX_2 </div>
    <div id="box3"> BOX_3 </div>
</body>

순서를 설정하지 않으면 뒤에 나오는 태그가 위쪽으로 배치된다.

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[css_효과]투명도(opacity), 가시속성, 그레디언트  (0) 2022.01.04
[CSS]박스_레이아웃 속성 : table  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : flex  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : float  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : position  (0) 2022.01.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함