HTML/CSS) position과 z-index로 겹쳐진 영역의 순서 조정이 안될 때

absolute, relation 등의 3차원의 특징을 갖는 속성 값을 사용하여

z-index로 순서를 조절하고 싶은데 고정되는 경우에

뒤에 위치할 영역에 opacity 값을 주어 순서를 변경할 수 있다

opacity : 투명도를 결정하는 값, 0~1의 값을 가지며 0이면 display: none과 같이 보이지 않지만 영역을 차지함

        1은 기본 값, 0에 가까울수록 흐려짐

opacity : .99;

** z-index는 해당 영역이 속해있는 가장 큰 영역의 z-index 값을 상속받는다
    -> 자식 노드에 큰 z-index 값을 주거나 !important를 주더라도 상위의 z-index 값을 받게됨

 

**postion: relative와 absolute가 혼재되어 있다면 relative 쪽의 z-index가 더 잘 받는것 같다

    -> 상위 노드의 z-index의 상대 값이 높더라도 상위노드의 position이 absolute 설정이 되어있고,

        순서를 변경하고자 하는 상대 엘리먼트가 position: relative인 경우 원하는 결과가 나오지 않을 수 있음..