position 속성
CSS position 속성은 문서에서 요소의 위치를 정의합니다.
이 속성은 왼쪽, 오른쪽, 위쪽, 아래쪽 및 z-색인 속성과 함께 작동하여 페이지에서 요소의 최종 위치를 결정합니다.
position: relative;
relative 요소는 문서의 일반적인 흐름에 따라 배치된 다음, left, right, top, bottom을 기반으로 원래 위치에서 벗어나 상대적으로 배치해줍니다.
즉, 별도의 값을 입력하지 않게 되면, 일반적인 흐름에 따라 배치됩니다.
position: absolute;
absolute 요소는 상위 요소를 기준으로 배치됩니다. 이 경우 요소는 일반 문서 흐름에서 제거되며, 다른 요소는 해당 요소가 문서에 없는 것처럼 작동합니다.
페이지 레이아웃의 요소에 대한 공간이 생성되지 않으며, left, right, top, bottom의 값이 요소의 최종 위치를 결정합니다.
한 가지 주의할 점은 absolute는 가장 가까운 위치에 있는 부모 요소를 기준으로 배치된다는 것입니다. 즉, 부모 요소는 positio: static;이 아는 다른 위치 값을 가져야 합니다.
position: fixed;
fixed 요소는 static 위치 요소와 유사합니다. 문서의 정상적인 흐름에서도 제거됩니다. 그러나 static 요소와 달리 항상 요소에 상대적으로 위치합니다.
또한 fixed 요소는 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.
display 속성
CSS에서 display 속성은 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 상호 배치되는지를 결정합니다.
inline
display 속성이 inline으로 지정된 엘리먼트는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다.
대표적인 inline 요소로는 span, a, em 태그 등이 있습니다.
block
display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.
대표적인 block 요소로는 div, p, h1 태그 등이 있습니다.
inline-block
display 속성이 inline-block으로 지정된 요소는 마치 하이브리드 모드 처럼 동작합니다.
기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만, block 요소처럼 width와 height 속성 지정 및 margin, padding 속성의 상하 간격 지정이 가능합니다.
내부적으로는 block 요소의 규칙을 따르면서 외부적으로는 inline 요소의 규칙을 따르게 되는 것입니다.
대표적인 inline-block 요소로 button, input, select 태그 등이 있습니다.
마무리
position과 display 요소를 활용해 box의 배치를 손쉽게 할 수 있다.
