z-index
2021. 7. 16. 10:54ㆍhello world!/css
요소의 쌓임 순서(stack order)를 정의할 수 있다.
정수 값을 지정하여 *쌓임맥락 (stacking context)에서의 레벨(순서)을 정의하는 방식으로 적용되며
*위치 지정 요소에 대해 적용할 수 있는 속성이다.=포지션이 지정된 요소에만 적용 가능하다.
* 위치 지정요소 positioned element
position속성이 정의되어있는 요소를 말한다.
* 쌓임맥락
동일한 위치에 요소들이 배치되면 요소들은 z축에서(겹쳐서) 쌓이게 된다.
나중에 생성된 요소가 위에 배치된다.
z-index의 기본값은 auto로써 이것은 새로운 쌓임맥락이 형성되지 않은 자연스러운 상태며
z-index로 정수값을 지정해주면 숫자가 높은 순서대로 위쪽에 배치되게 된다.
▼ z-index 적용 전
<title>z-index</title> <style> div{ width: 100px; height: 100px; position: relative;} div:nth-child(1) {background-color: yellow;} div:nth-child(2) {background-color: violet; bottom: 50px;} div:nth-child(3) {background-color: turquoise; bottom: 100px;} div:nth-child(4) {background-color:tomato; bottom:150px;} </style> </head> <body> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> <div class="fourth">4</div> </body> |
position: relative : 일반적 문서의 흐름에 따라 배치되는데, 상 하 좌 우 값에 따라 오프셋 적용
▼ z-index 적용 후
<style> div{ width: 100px; height: 100px; position: relative;} div:nth-child(1) {background-color: yellow;} div:nth-child(2) {background-color: violet; bottom: 50px;} div:nth-child(3) {background-color: turquoise; bottom: 100px;} div:nth-child(4) {background-color:tomato; bottom:150px;} .first { z-index: 4 ;} .second { z-index: 3 ;} .third { z-index: 2 } .fourth { z-index: 1 ;} </style> </head> <body> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> <div class="fourth">4</div> |
'hello world! > css' 카테고리의 다른 글
| 구글 웹폰트 사용 (0) | 2022.02.09 |
|---|---|
| border-radius (모서리라운드) (0) | 2021.07.16 |
| 공용키워드(상속여부) (0) | 2021.07.14 |
| 상속 (0) | 2021.07.14 |
| 의사요소 :: (0) | 2021.07.14 |