[CSS] z-index 속성

[CSS] z-index 속성

---

✔️ z-index 속성

: position 속성이 설정된 요소 중 static 이 아닌 요소와 그 자손 요소의 Z축 순서를 지정한다.

즉, Z 축 순서를 지정하기 위해서는 position 속성을 설정한 후 z-index 속성을 지정해야한다.

✨ 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.

 

📓 속성값

- auto : z-index를 설정하지 않는다. 부모 요소와 동일

.yellow {
	background-color: yellow;
	z-index: 1000; /*position 이 static 이면 적용 안된다.*/
}

.orange {
	background-color: orange;
	left: 100px; top: 100px;
	z-index: 100;
}

.green {
	background-color: green;
	left: 150px;
	top: 150px;
	z-index: 500;
}

.blue {
	background-color: blue;
	left: 180px; top: 120px;
	z-index: 10;
}

 

 

✔️ clip 속성

: 요소의 어느 부분이 보이는지를 정의한다.

: position 이 absolute 또는 fixed 요소에만 적용된다.

.img {
	position: absolute;
	top: 80px; left: 420px;
	clip: rect(20px, 220px, 220px, 20px); /*450 * 300 이미미 중 */
	/*top, right, bottom, left */
	
}