[CSS] z-index

HyunJung Song·2021년 11월 12일
0

Issue

목록 보기
1/2

이번에 웹페이지 리메이크를 해보면서 맞이한 이슈들 중 z-index 관련 이슈가 있었다.

  1. z-index가 적용되지 않음
  2. 자식 요소에 z-index 음수값을 주면 hover가 적용되지 않음

위 문제를 해결하기 위해서 아래의 방법을 사용했다.

  1. position 속성으로 해결
  2. 해당 요소의 형제 요소에 양수값을 주어 배치

z-index 뿐만 아니라 위치 잡는 것도 많이 해맸다ㅠㅠ

1. z-index 적용

z-index가 없는 경우 요소들이 쌓이는 순서는 다음과 같다.

  1. 뿌리 엘리먼트의 배경과 테두리
  2. 자식 요소들은 등장하는 순서대로
  3. position이 지정된 자식 요소들도 등장하는 순서대로

만약 다른 순서로 쌓고 싶을 때 z-index 속성을 사용하는데, 반드시 position 속성을 같이 설정해주어야 한다.

z-index는 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능)

쌓임 맥락(stacking context)

쌓임 맥락의 조건은 여러가지가 있다.

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

여기서 기억할 것은 자식의 z-index 값은 부모에게만 의미가 있다는 점이다.

2. 음수 값 지정 시 hover 효과 적용 X

<div id="parents">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

하나의 부모 안에 3가지의 div가 있고 그 div들은 서로 겹쳐지는 디자인이였다.

첫번째 자식요소의 일부가 두, 세번째 자식 요소에 의해 가려지기 때문에 첫번째 요소에게 z-index를 음수값을 줘서 간단하게 해결하려고 했다(ㅎㅎ)

문제는 hover 이벤트가 음수값을 가진 첫번째 요소에게 먹히지 않는다는 것.

개발자 도구를 이용해서 봤을 때, 부모요소의 크기를 화면 전체로 지정했기 때문에 첫번째 자식요소가 z-index 기본값인 부모요소에게 가려져서 적용되지 않는 것을 확인했다.

다시 첫번째에게 z-index를 기본값으로 돌리고, 다른 형제 요소들에게 각각 양수값을 지정해서 자식 요소들이 부모요소 아래로 내려가지 않도록 설정했다.

보이지 않아서 간과할 수 있는 부모요소를 주의해서 자식들을 움직이도록 하자

profile
30분이라도 매일 👩🏻‍💻

0개의 댓글