display: relative는 언제 사용하면 좋을까?

뭔지는 잘 모르겠지만 이것저것 따라하다보면 자주 등장하는 속성 중 하나는 display였어요.

 

저번 포스팅에서 display속성에는 5가지가 있었는데, 이론적으로 설명을 읽는다고 해도 사실 실전에 활용하지 않는 이상 개념이 잘 와닿지 않더라구요.

 

계속해서 웹사이트를 클로닝 하는 과정에서 relative를 사용하는 부분이 있어서 다시 한 번 정리해보고자 합니다.

 

 

<nav>까지는 어찌저찌 잘 했고(이전 포스팅 참고하셔도 좋아요!)

 

그리고 봤더니, 네비게이션 메뉴 때문에 기존에 있던 사진의 위쪽이 짤렸더라구요.

메뉴가 z-index: 1;로 앞으로 나와있다보니 뒤에 위치한 사진과 메뉴가 겹치는 부분이 사라지게 되어버렸어요.

 

Position

여기서 다시 position을 소환해 봅니다.

 

이 부분에서 오늘 적용해 볼 건 position: relative; 입니다.

 

우선 사진이 상단의 메뉴보다는 아래로 오면서 약간 여백이 있으면 합니다. 그래서 사진 위쪽에 70px 여백이 오도록 설정하고자 해요.

 

top: 70px;을 먼저 설정해주지만, 아직 화면에 변화는 없습니다. 여전이 사진의 위쪽이 다 보이지 않는 상태에요.

 

여기서 position: relative;를 설정해 줄게요.

 

 

position: relative;는 top, bottom, right, left 중에서 설정된 값이 원래 있어야 할 위치에서부터 설정한 값만큼 이동하게 됩니다. top: 70px;을 설정했으니까 원래 있던 위치에서 위에서 70px만큼 여백을 두고 사진이 아래 쪽으로 이동하게 됩니다.

 

 

짜잔-! 결과는 다음과 같아요.

오른쪽의 사진 위에 약간의 여백이 생긴 게 보이시나요?

 

 

상단에 고정된 메뉴 때문에 가려졌던 사진이 아래로 내려오게 되면서 온전한 전체 사진을 다시 드러내게 되었어요.

 

 

이렇게 position의 한 속성인 relative에 대해서 하나 더 알게 되었네요. 저번에는 메뉴를 고정시키는 과정에서 fixed를 배웠는데 이렇게 하나하나 알아가게 되어 재밌습니다!