HTML z-index with background

<div id="test1">

    <ul>

        <li></li>

    </ul>

</div>
div: relative

ul, li: absolute 

 

 다음과 같은 구조일 때 ul, li에 background를 사용하면서 ul의 z-index를 사용하면 어떤 결과가 나타날까?

li 배경이 보이면서 ul의 배경이  li 배경보다 앞 쪽 레이어에 위치시킬 수 있을까?

답은 이 구조하에서는  그럴 수 없다. 이 상황에서 z-index를 사용해도 stacking context에 영향을 미치지 않는다. 쉽게 말하면 css background 사용시 z-index를 변경하여 "배경을 맨 앞으로 가져오기" 같은 것을 할 수 없다. 차라리, li의 배경을 "맨 뒤로 보내서" ul의 배경만 표시하는 것은 가능하다. 

 

 그렇다면 어떻게 하면 될까 ul의 배경에 해당하는 것을 앞으로 가져올 수 있을까?

정답은 ul의 자식이면서 li와 형제인 div 태그 같은 것을 만드는 방법으로 해결할 수 있다. 즉, 아래와 같은 코드로 작성하면 div와 li 간의 배경 중에 어떤 것이 앞으로 올지 정할 수 있다. 하지만 div 없이 ul과 li의 부모 자식 관계에서 부모의 배경을 앞으로 가져오는 것은 어렵다.

 

<div id="test1">

    <ul>

        <div></div>

        <li></li>

    </ul>

</div>
div: relative

div, li: absolute 

 

참고로 ul, li에 배경을 적용하면 li의 배경이 항상 앞에 오는 것을 알 수 있다. 이는 html의 stacking context를 따른다. stacking context 관련 글은 하단부에 링크를 적어두었다.

 

아래 예시를 통해 직접 다양하게 확인해보면 이해가 된다. 우선, position, background에 대한 이해가 필요하다. test1 ~ test4는 ul, li에 background를 적용하였고 test10 ~ test11은 ul이나 li에 img태그를 넣어서 이미지를 넣은 예시다.

 

아래는 html코드, css코드, 실행결과 순이다. 

 

html 코드

 

css 코드

 

실행결과

 

 

 

정리하면 다음과 같다.

* html 상에서 앞에 오는 태그의 배경이 뒤에 오는 태그의 배경보다 먼저 올지(뒤에 오는 태그 배경이 보이면서 앞에오는 태그 배경이 앞에오는 상황) 조절할 수 있으려면 형제여야 가능하다. 

*부모- 자식간의 관계에서 부모의 배경을 보여주려면 자식의 z-index를 통해 자식을 맨 뒤로 보내야만 가능하다. 이렇게 되면 자식의 배경은 안 보이고 부모의 배경만 보이는 것이다.

 

stacking context 링크

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context