[CSS] z-index, position:fixed, box-shadow

z-index

z-index는 요소를 z축, 즉 요소의 위로 올릴 수 있다.

z-index:9999; 같은 너무 큰 값을 지정해버리면 나중에 다시 손이 가야 할 수도 있으니 주의하며 사용해야한다.

 

position:fixed

fixed는 요소를 화면에 고정할 수 있다.

viewport를 기준으로 위치가 잡힌다.

 

box-shadow

요소에 그림자를 만들 수 있다.

그림자뿐 아니라 응용하여 팝업창이 떴을 때 뒷 배경을 어둡게, 불투명하게 만들 수도 있다.

아래는 그 예시이다.

box-shadow:rgba(0, 0, 0, 0.5) 0 0 0 9999px;

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

여기에서 box-shadow에 값을 바꾸어 적용해가며 실시간으로 확인할 수 있고,

복사하여 사용할 수도 있다.