[CSS] position과 z-index 속성에 대하여

저는 얼마 전 디자인을 가져오고 있는데 UI가 이상해져서 CSS 코드를 살펴보다가

position: absolute;

이런 코드가 가져와지는 것을 봤습니다. 예전에 강의에서 본 적은 있지만 너무 가볍게 넘어가 코드를 수정하는데 많은 시간 소모되었습니다. 그래서 position 속성에 대해 정확히 짚고 넘어가고 싶고 알게 된 같이 사용하면 좋은 z-index도 설명하고 싶어 이렇게 글을 쓰게 되었습니다!

Position?

• 보통 자신이 원하는 정확한 위치에 위치시키기 위해 사용합니다
• top, bottom, left, right 속성과 함께 사용합니다

장점

• 쉽게 위치 조정을 할 수 있습니다
• 정밀하게 위치를 조정할 수 있습니다

단점

• 많이 사용하게 되면 코드가 복잡해집니다
• 반응형 디자인을 할 때 문제가 생길 수도있습니다

 

static

• 기본 값으로 되는 속성으로서 원래 위치되어야 하는 위치에 위치합니다
• 작성한 순서대로 표시된다는 뜻입니다
• 이 속성일 때는 top, bottom, left, right 속성들이 무시 됩니다

예를 들어

 

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

 

이런 식으로 순서대로 차곡차곡 쌓이게 되고 op, bottom, left, right 속성들로 움직이는 것은 불가능 합니다.

relative

• 원래 위치에서 벗어난 곳에 위치시킬 수 있습니다
• 원래 위치에서 상대적으로 벗어난 곳에 위치한다라고 이해하면 쉽습니다
• 이 속성일 때는 top, bottom, left, right 속성들이 적용됩니다 (상하좌우)

예를 들어 top을 50px, left를 60px를 줘 보았습니다.

 

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

 

이런 식으로 top, bottom, left, right 속성들이 적용되어 박스가 움직이게 됩니다.

absolute

이 속성은 가장 복잡하고 주의하여 사용해야 할 속성입니다. 절대 이름 같이 절대적으로 요소가 배치되지 않습니다.

• 이 속성을 적용하면 배치 기준이 본인이 아닌 부모 요소 입니다
• 속성이 static이 아닌 첫번째 부모 요소가 위치 기준이 됩니다
• 만약 모두 속성이 static이라면 body 요소가 위치의 기준이 됩니다
• 이런 복잡한 특성 때문에 많이 활용하지 않습니다
• absolute 속성을 사용할 때에는 부모요소의 positon 속성을 relative으로 하는게 보통입니다
• 이 속성을 사용하면 독립되어 더이상 앞뒤 요소들과 상호작용을 하지 않습니다 

예를 들어 파란 박스 div를 부모요소로 relative 속성을 주고 bottom 10px, right 20px 줘 보았습니다

 

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

위에 보이듯이 독립되어 3번째 요소가 첫번째 요소와 붙은 것을 볼 수 있습니다.

fixed

• 요소를 고정 되게 해주는 속성입니다
• 위치하는 기준이 자신이나 부모가 아닌 브라우저의 전체 화면 입니다
• top, bottom, left, right 속성을 이용해 위치를 조정합니다
• 라이브 채팅 버튼을 구현할 때 많이 쓰입니다

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

보이는 것처럼 고정이 되고 전체화면이 기준이 되는 것을 볼 수 있습니다.

sticky

• 비교적 가장 최근에 생긴 속성입니다
• 스크롤할 때 볼 수 있는 속성입니다
• top, bottom, left, right 속성들 중 무조건 하나를 적용해야 이 속성이 적용됩니다

예제를 보는 것이 더 이해 하기가 쉬우니 예제로 바로 보여드리겠습니다

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

이름처럼 화면에 붙어서 안사라지는 것을 볼 수 있습니다

z-index

• 객체를 원하는 순서대로 배치할 수 있는기능입니다
• 속성이 relative이거나 absolute일 때 적용됩니다
• 기본 값은 auto입니다
• 숫자가 높을수록 위쪽에 배치됩니다
• 항상 부모요소가 우선순위에 있습니다
• 순서 값이 없으면 코드 순서대로 쌓입니다

예를 들어

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

보이는 것처럼 클수록 위에 있습니다

마무리

이러한 position 속성과 z-index를 제대로 알고 사용하면 요소의 위치를 훨씬 더 편리하게 원하는 정확한 위치에 위치시킬 수 있습니다!!