본문 바로가기

WebDev

position: fixed 그리고 z-index

position: fixed 그리고 z-index

팝업 div와 같이, 화면에 뭔가를 고정된 위치에 표현하기 위해 fixed를 쓰다 보면 z축 우선순위가 꼬이는 경우가 종종 있다.

앞으로 그런 일이 생기지 않도록 예시 코드 와 함께 정리한다.

Rule

  1. fixed의 자식 또한 fixed 속성을 사용 가능하다
  2. parent와 child간에서는 child의 z-index가 우선된다
  3. parentA의 child는 z-index를 아무리 높여봤자 parentB에게 영향을 미칠 수 없다
  4. parentA와 parentB가 존재할 때: z-index가 지정되지 않거나, 같을 경우 나중에 html에 나온 것이 더 위에 표현된다
  5. parentA와 parentB가 존재할 때(2): z-index가 더 높은 것이 더 위에 표시된다. fixed속성의 child의 z-index가 다른 parent에 속한 child보다 낮더라도, parent수준에서 더 높은 것으로 결정되므로, Rule3을 만족한다

Convention

  1. fixed 속성의 사용을 자제하자
  2. 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