-
728x90반응형
z-index 속성
개요
position 속성을 absolute 등으로 변경하면 태그들이 겹치게 될 수 있다.
일반적으로 더 나중에 서언한 태그가 위에 배치된다.
style 속성의
z-index를 이용하면 더 위에 배치시키거나 더 아래에 배치시킬 수 있다.z-index값이 높을수록 위, 작을수록 아래에 배치되며 정수 혹은 자연수 값을 사용한다.사용법
<style> #box { z-index:33 } </style>예제
<html> <head> <style> .box { width:150px; height:50px; position:absolute; } #box1 { z-index:30; background-color:cyan; left:0px; top:0px; } #box2 { z-index:70; background-color:blue; left:50px; top:30px; } #box3 { z-index:10; background-color:magenta; left:100px; top:60px; } </style> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <div id="box3" class="box"></div> </body> </html>출력 결과 :
728x90반응형'Style Sheet > CSS' 카테고리의 다른 글
s✨ CSS 박스 모델 (Box-model) (0) 2024.01.16 ✨CSS 선택자 (0) 2024.01.15 CSS position (0) 2018.09.19 CSS box-sizing 사용법 (0) 2018.09.18 CSS display 태그 속성 정리 (0) 2018.09.11
