[Web] z-index 적용 안될 때

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

The position:static property prevents z-index from having an effect.
Try setting position to something other than static.

"z-index : 100" 을 적용해도 앞으로 나오지 않는다!

---

2. Why? (원인)

• z-index로 인한 stack은 position이 할당되어야만 합니다.
• default인 static 일 때 적용이 안됩니다.

---

3. How? (해결책)

• "position : fixed" 등 할당을 해주어야합니다.
• "top:50px", "left:50px" 등 위치까지 지정해주어야 합니다.

---