CSS : (Position - relative, absolute, fixed) / inline /inline-block / block

Position

 

position 속성은 문서 상 요소들을 어떻게 배치할 지 정합니다.

Top, Right, Bottom, Left 속성을 이용해서 요소의 최종 위치를 결정합니다. 

 

 

position 속성은 하나의 키워드 값을 선택해 지정할 수 있습니다.

static | relative | absolute | fixed | sticky

 

 

 

Static

요소를 일반적인 문서 흐름에 따라 배치합니다. Top, Right, Bottom, Left, z-index 속성에 영향을 받지 않는 기본값입니다.

 

 

Relative

요소를 일반적인 문서 흐름에 따라 배치하고, 현재 자기 자신의 위치를 기준으로 top, right, bottom, left의 값에 따라 위치의 변화를 적용합니다. 다른 요소에는 영향을 주지 않습니다. 즉 이동한 이후에 원래 차지하던 자리에 다른 요소가 들어오는 것이 아니라, 지켜집니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. z-index의 값이 auto가 아니라면 요소간의 표시 우선순위를 생성합니다.

 

 

Absolute

요소를 일반적인 문서 흐름에 따라 제거합니다.

페이지 레이아웃에 공간을 배정하지 않습니다. 자리가 변경되면 빈 공간을 다른 요소가 차지합니다.

조상 요소를 기준으로 위치가 지정됩니다. 부모 중 position 이 relative 인 요소가 있는 경우 해당 요소를 기준으로 배치됩니다. 부모 중 position relative 지정 요소가 없다면 초기 컨테이닝 블록(뷰포트 viewport - 브라우저 상단, 왼쪽 0, 0 값을 기준)을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다. z-index의 값이 auto가 아니라면 요소간의 표시 우선순위를 생성합니다.

 

Position : absolute 값을 갖게 되면, 요소의 형식이 block -> inline-block 으로 변화합니다. 내용의 크기 만큼만 가로 크기가 지정됩니다.

 

 

Fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간을 배정하지 않습니다.

 

뷰포트의 초기 컨테이닝 블록 (뷰포트 viewport - 브라우저 상단, 왼쪽 0, 0 값을 기준)을 기준으로 삼아 배치합니다. 스크롤이 되어도 같은 자리에 Fixed 되어있습니다.

 

단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. fixed를 가지는 요소의 부모에 transform, perspective, filter 속성을 추가해서 좌표를 변경하면 페이지가 스크롤될 때 움직이지 않아야 할 요소가 움직입니다. 부모 요소에 새로운 viewprot가 설정되고 자식 요소가 가진 position: fixed 속성이 영향을 받기 때문입니다.

 

최종 위치는 top, right, bottom, left 값이 지정합니다. 이 값은 항상 새 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.

 

Position : fixed 값을 갖게 되면, 요소의 형식이 block -> inline-block 으로 변화합니다. 내용의 크기 만큼만 가로 크기가 지정됩니다.

 

 

Sticky

 

 

sticky 속성은 기준점 이상을 넘지 않을 때는 relative 포지션처럼 동작합니다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 됩니다. fixed 속성과 같이 동작하게 됩니다. 

 

sticky 속성을 갖는 엘리먼트의 부모 노드는 반드시 height가 설정되어 있어야합니다.

그렇지 않으면 sticky 속성의 엘리먼트는 static 속성처럼 동작하게 됩니다.

 

부모 또는 조상 노드에 overflow 설정이 되어 있으면 동작하지 않습니다.

 

 

Inline / Block / Inline-block

 

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.

대표적인 inline 엘리먼트로 <span>이나 <a> 태그를 들 수 있습니다.

 

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

 

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.

대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.

 

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

 

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 Inline 형식과 block 형식의 특징을 둘다 가집니다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin, padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것입니다.

 

대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그가 있습니다.

 

inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/position

https://www.daleseo.com/css-display-inline-block/