[CSS] position의 absolute가 가려지는 경우

정의

position: relative

요소의 위치를 상대적인 위치 및 기준점으로 설정한다는 속성으로, 대개 absolute 속성을 가진 자식의 부모 태그에 많이 쓰여진다. absolute의 경우 부모 태그의 relative가 없이 쓰게 되면 전체 인터페이스를 기준으로 엘리먼트의 위치를 잡기 때문에 최상단이나 최하단의 위치한 경우가 아니고서야 엘리먼트의 위치를 제대로 지정하기 어렵게 된다.

이것을 방지하기 위해서는 그 엘리먼트가 속한 부모 태그에 position: relative를 줌으로써 너무 자유분방한  absolute에게"너는 내 안에서만 놀아!"라고 공간을 제어해줄 수 있다.

 

position: absolute

요소의 위치를 절대적 값으로 설정한다는 속성으로, 이미 다 짜놓은 태그 위에 특정 엘리먼트를 추가한다거나, 위치를 제대로 잡기 어려울 때 자주 쓰인다. 보통 {position: absolute; top: 0; left: 0;}의 식으로 쓰며 absolute를 선언한 뒤 top, bottom, left, right의 위치를 함께 지정해줘야한다.

absolute의 경우 relative를 제어를 받게 되는데, 부모 태그에 relative가 있다는 것은 자식 태그에 absolute가 있다는 방증이라고 할 수 있으며 개인적으로 마크업을 할 때 원하는 위치에 정확히 배치할 수 있다는 장점에서 치트키같은 느낌이 드는 속성이라고 할 수 있다.

 

문제

다음과 같은 html 태그가 있다고 가정해보자.

<div class="a">
  <span></span>
</div>
<div class="b">
  <p></p>
</div>

총 2개의 div가 상하로 나란히 배치되어 있으며, 그 안에는 span과 p라는 태그를  자식으로 임의로 주었다.

 

.a {
  width: 100px;
  height: 100px;
  position: relative;
}

.a span {
  display: block;
  width: 50px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.b {
  width: 100px;
  height: 100px;
}

.b p {
  width: 50px;
  height: 150px;
  position: relative;
}

CSS는 위처럼 a의 span에는 absolute를 주었고, b의 p에는 relative를 주었다.

이 둘 사이에는 margin 값이 없으며 나란히 붙어있기 때문에 두 엘리먼트 간에 서로 충돌하는 상황이 발생한다.

결과를 보면 b의 p가 a의 span을 가리게 된다.

 

.a {
  width: 100px;
  height: 100px;
  position: relative;
}

.a span {
  display: block;
  width: 50px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.b {
  width: 100px;
  height: 100px;
  position: relative;
}

.b p {
  width: 50px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

이번에는 b의 p에도 absolute 값을 주었다. 결과는 역시나 같았다.

 

.a {
  width: 100px;
  height: 100px;
  position: relative;
}

.a span {
  display: block;
  width: 50px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.b {
  width: 100px;
  height: 100px;
}

.b p {
  width: 50px;
  height: 150px;
}

이번에는 b에 position을 없앴고, p에도 아무런 값을 넣어주지 않았다. 결과는 앞과 달리 a의 span이 b의 p를 가리게 되었다.

 

.a {
  width: 100px;
  height: 100px;
  position: relative;
}

.a span {
  display: block;
  width: 50px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.b {
  width: 100px;
  height: 100px;
  position: relative;
}

이번에는 b의 p를 지웠다. 대신 b에 relative 값을 주었다. 결과는 a의 span이 b에게 가려졌다.

 

해결

position: absolute를 한 순간 우리는 이것을 기억해야 한다. 부모 태그에 relative를 주었는가? 그리고, 주변에 relative 혹은 absolute 속성을 가진 또다른 엘리먼트가 존재하는가?

전자는 absolute의 배치를 더 용이하게 하기 위함이라면, 후자는 또다른 position 값을 가진 엘리먼트에게 가려짐을 방지하기 위해서이다.

 

나도 그랬고 간혹 CSS를 공부하시는 분들이 자주할 수 있는 실수이다. "absolute 값을 주었는데 화면에 보이지가 않아요.." 혹은 "absolute인데 특정 부분만 클릭이 안 돼요.."

원인은 바로 해당 absolute가 다른 relative나 absolute에게 가려져서이다.

 

.a {
  width: 100px;
  height: 100px;
  position: relative;
}

.a span {
  display: block;
  width: 50px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.b {
  width: 100px;
  height: 100px;
}

.b p {
  width: 50px;
  height: 150px;
  position: relative;
}

첫 번째에 있던 CSS를 가져왔다. 이 CSS의 문제는 a의 span을 자꾸 b의 p가 가린다는 것이었다.

만약 span이 p 위에 있었으면 좋겠다 싶다면, 바로 span에 "z-index" 값을 주면 된다.

z-index란 요소의 위치가 겹칠 경우 순서를 정의하는 속성으로써 값이 작아질수록 바닥에, 커질수록 천장에 있다고 보면 된다. 

 

내가 배치하고 싶은 absolute 엘리먼트가 갑자기 짤리는 경우가 생긴다면, 근처에 relative 혹은 absolute가 있다는 것이니 z-index: 1 혹은 그 이상의 값을 적어 최대한 위로 올려주는 게 좋다.