position, opacity 사용시 z-index 주의점

열심히 클론코딩 하며 공부를 하고 있었다.

그냥 똑같이 만드는건 식상하니까 좀 차별화 되게 만들어보고 싶었다.

하지만, 바로 문제가 생겨벼렸다... (2시간 넘게 고민해보고 안되서 그날은 공부 포기하고 쉬었던...ㅜ)

 

바로 원치않게 화면의 요소가 앞으로 튀어나온 나온 것이다!

 

<Fig. 1: Find 아래에 반구(?) 사진처럼 사라져야 하는데 글자들이.. 앞에 올라온다>

 

분명 다른데에선 이런 문제가 없었는데 이 페이지에서만 이랬다.

 

결국 앞으로 나온 부분들의 css를 찾아 조사해본 결과 기존 잘 되었던 페이지들과 차이점이 있었다.

바로 opacity, position 속성을 준 것이다.

 

냉정하게 오류난 부분이 기존의 것과 뭐가 다른지 알아내니까 원인을 찾기 쉬워졌고, 결국 찾아냈다.

z-index 속성과 관련된 natural stacking order 문제 때문이었다.

 

 

문제를 설명하기에 앞서 position과 opacity속성에 관해 간략히 정리하자.

 

 

---

position의 주요 속성

1. position: static (default)
    박스가 처음 위치한 곳에 위치됨.

2. position: fixed
    처음 위치한 자리에서 화면의 스크롤과 상관없이 고정되게 됨 top, bottom, left, right 속성을 줘서 고정된 위치를 이동시킬 수 있음.
    단, 위치가 이동될 때 가장 위의 새 레이어에 놓이게 됨.

3. position: relative
    박스가 처음 위치한 곳을 기준, top, bottom, left, right 속성을 줘서 고정된 위치를 이동시킬 수 있음. 

4. position: absolute
    position: relative 속성이 있는 가장 가까운 부모 엘리먼트를 기준으로 top, bottom, left, right 속성을 줘서 이동할 수 있음
    relative 속성이 있는 부모가 없으면 body를 기준으로 이동된다.

 

opacity의 주요 속성

불투명도를 지정하는 속성으로 0~1사이의 실수값을 갖는다.

 

---

 

목적은 status-bar, screen-header, navigation-bar와 같은 요소는 스크롤 해도 정지해있고, 나머지 main의 컨텐츠들은 스크롤하되, 위 3개 요소 아래에 위치하도록 하는 것이 목적이었다. 따라서 위 3개 요소는 position: fixed로 위치를 고정했다.

 

그리고 페이지를 만들며 해시태그 텍스트에 opacity속성을 줘서 회색으로 만들었고, 사진위에 ♥️를 올리기 위해 position: relative, absolute 속성을 줬다.

 

<Fig. 2: 만들고 싶었던 목표>

 

하지만 결과는 원하는 대로 나오지 않았다. opacity, position 속성을 준 요소가 status-bar, screen-header, navigation-bar 보다 앞에 나오는 것이다...ㅜ

 

<Fig. 3: 현실은 시궁창>

 

이렇게 나오는 이유는 바로 z-index를 명시해주지 않아 브라우저 내부에서 natural stacking order에 따라 요소를 배치했기 때문이다.

 

아래는 w3에서 발췌한 z-index에 대한 문서의 일부이다.

 

---

If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21]*, except that if the used value is ‘auto’ then the element behaves exactly as if it were ‘0’.

*[CSS21] 요약본 (section 9.9): 'z-index'

Value:	auto | <integer> | inherit
Initial:	auto
Applies to:	positioned elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	as specified

---

 

요약하자면, 불투명도가 1 미만인 요소가 배치되고, 'z-index' 속성이 명시되지 않았으면 auto값이 dafault로 들어가는데, 이는 0인 것 처럼 동작된다.

예시를 opacity로만 들었는데, opacity뿐 만 아니라 position에 속성을 줄 때도 같은 현상이 발생할 수 있다. 

따라서 정확히 이해할 수는 없어도 natural stacking order에 따라 배치되기 때문에 우리가 원치 않게 요소들이 배치될 수 있다.

 

 

<Fig. 3>에서와 같은 문제를 해결하기 위한 방법은 간단하다.

맨 앞으로 나와야 할 요소에 z-index값을 명시해주면 된다.

맨 앞으로 나와야 할 요소 중에서도 더 앞으로 나와야 하는 요소에는 더 큰 z-index값을 넣어주면 된다.

 

하지만 z-index가 만능은 아닌게, 부모의 z-index가 자식의 z-index보다 작을 경우 자식의 z-index는 부모의 z-index보다 커질 수 없다.

(정확히는 자식의 z-index는 부모 태그 안에서만 유효하다.)

 

 

따라서 HTML에서 부모-자식관계를 명확히 필요한대로 설계하고, 마지막에 원하는 대로 나오지 않을 경우 z-index를 명시하여 수정하면 된다.

 

요약

---

opacity, position 등 속성을 줄 경우 natural stacking order에 따라 화면에 배치된다.
이 경우 z-index를 명시하면 해결할 수 있다.