position: fixed 그리고 z-index
팝업 div와 같이, 화면에 뭔가를 고정된 위치에 표현하기 위해 fixed를 쓰다 보면 z축 우선순위가 꼬이는 경우가 종종 있다.
앞으로 그런 일이 생기지 않도록 예시 코드 와 함께 정리한다.
Rule
- fixed의 자식 또한 fixed 속성을 사용 가능하다
- parent와 child간에서는 child의 z-index가 우선된다
- parentA의 child는 z-index를 아무리 높여봤자 parentB에게 영향을 미칠 수 없다
- parentA와 parentB가 존재할 때: z-index가 지정되지 않거나, 같을 경우 나중에 html에 나온 것이 더 위에 표현된다
- parentA와 parentB가 존재할 때(2): z-index가 더 높은 것이 더 위에 표시된다. fixed속성의 child의 z-index가 다른 parent에 속한 child보다 낮더라도, parent수준에서 더 높은 것으로 결정되므로, Rule3을 만족한다
Convention
- fixed 속성의 사용을 자제하자
- fixed 속성을 가진 노드를 담을 container를 만들고, 이 위치에 모든 fixed 노드들이 들어가도록 장려한다
'WebDev' 카테고리의 다른 글
깨지지 않는 유연한 디자인을 위한 규칙 (0) | 2018.12.14 |
---|---|
Elasticbeanstalk docker Using Images From a Private Repository (new) (0) | 2016.06.04 |
AWS 인증서 업로드 (0) | 2016.03.25 |
jQuery direct text (0) | 2016.03.19 |
AngularJS (0) | 2016.03.11 |