-
CSS - visibility, z-index프론트엔드/CSS 2020. 8. 24. 01:54
visibility
<style> #box1{ background: lightgoldenrodyellow; } #box2{ background: pink; visibility: hidden; } #box3{ background: lightblue; } </style> </head> <body> <p id="box1"> 1번 박스 </p> <p id="box2"> 2번 박스 </p> <p id="box3"> 3번 박스 </p> </body>visibility는 해당 요소의 공개 여부를 결정하는 속성이다.
visibility를 속성으로 부여하고 속성값으로 'hidden'을 주면 해당 요소는 화면에서 숨겨진다.
하지만 눈에는 보이지 않지만 실제로는 공간을 차지한다.
예시에선 visibility가 hidden된 box2가 눈에 보이진 않지만, 위치는 차지하게 된다.
z-index
<body> <style> div{ width: 250px; height: 250px; text-align: center; font-size: 50px; position: relative; } #box1{ background: lightgoldenrodyellow; z-index: 1; } #box2{ top: -250px; left: 150px; background: pink; z-index: 2; } #box3{ top: -350px; left: 75px; background: lightblue; z-index: 3; } </style> <div> <div id="box1"> 1번 박스 </div> <div id="box2"> 2번 박스 </div> <div id="box3"> 3번 박스 </div> </div> </body>각종 요소를 배치하다보면 해당 요소들이 겹칠 수 있다.
이때 'z-index'값을 설정하면 해당 요소들이 겹쳤을 때 어떤 요소가 앞에 올지 정할 수 있다.
'z-index'값이 높을 수록 해당 요소가 가장 앞으로 나오게 되어있다.
예시에선 3번 박스의 'z-index'값이 가장 크므로 요소들이 겹쳐쓸 때 맨 앞에 왔다.
'프론트엔드 > CSS' 카테고리의 다른 글
플렉스 박스: 'flex-direction' (0) 2020.08.26 플렉스 박스(Flex box, Flexible box) 기본 개념 (0) 2020.08.26 CSS - position (0) 2020.08.24 CSS - 레이아웃 (0) 2020.08.24 CSS - 박스모델 (0) 2020.08.23