5월 취업대비 - position 의 사용

 

position

 

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있습니다.

 

static 

 

static은 position 속성의 기본값입니다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없습니다. (float 속성은 가능합니다)

 

 

relative

 

static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 예로들어, static일 때 기준으로 왼쪽으로부터 50px, 위쪽으로부터 30px에 위치해 있다면 style="top:5px; left: 5px;" 을 적용하면 왼쪽으로부터 55px, 위쪽으로부터 35px 이동하는 형식입니다. 상대적 위치는 top, right, bottom, left 속성을 써서 나타낼 수 있습니다.

 

absolute

 

absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다. 

 

이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소입니다.

 

fixed

 

fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다. (기준점: 브라우저 왼쪽 위 꼭지점)

 

• 이 fixed 요소를 가지고 문의하기, Q&A, 대화창 등 서비스 사용자에게 계속적으로 노출해야하는 요소를 브라우저 창에 삽입할 수 있습니다.

 

sticky

 

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

 

scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻합니다. 여기서 부모요소가 overflow를 특별히 명시하지 않았다면 부모요소가 바로 scroll 박스가 됩니다!

 

만일 scroll 박스 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

reference.

[HTML&CSS] position 속성 정리하기!.새로비(19.10).23.05검색.https://engkimbs.tistory.com/922