코린이는 오늘도 도전한다!!
홈페이지를 만들다가 스크롤을 하니 네비게이션바 위에 텍스트들이 올라와서 흉한 것을 고치고 싶어서 찾아보게 되었다.
z-index란 ?
대상과 그 자손이나 하위 아이템들의 z축 순서를 지정한다.
< 여기서 잠깐! z축이란?>
z-index 속성
* z-index : auto
* z-index : 숫자
- 숫자가 높을수록 상위에 쌓인다
- 음수값도 사용이 가능한데 부모요소 뒤로 사라지게 된다.
* 가장 중요한 특징 중 하나는 아무 요소다 다 z-index를 넣는다고 적용되는 것은 아니다.
무슨 얘기인가하면 position : static값에서는 적용되지 않는다.
예시
나는 배우는 입장이기 때문에 모질라 페이지에서 https://developer.mozilla.org/ko/docs/Web/CSS/z-index
예시를 가져왔다.
z-index - CSS: Cascading Style Sheets | MDN
CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.
developer.mozilla.org
css버튼을 눌러 z-index를 확인해주세요!
'CSS' 카테고리의 다른 글
| [CSS] display : none vs visibility: hidden (0) | 2023.02.16 |
|---|---|
| [CSS] input 태그 안의 타입(type)을 선택하려면? (0) | 2023.01.24 |
| [CSS] ::after에 대해서 (1) | 2023.01.19 |
| [CSS] :root 가상 클래스 (0) | 2023.01.03 |
| CSS : Position에 대해서 (0) | 2022.11.30 |