HTML&CSS

[CSS] Position Property

JayLee 2018. 6. 12. 09:05
반응형

static

 기본 값. 위치가 지정된 것이 아닌 상태.


relative

 별도의 프로퍼티를 지정하지 않은 이상 static과 동일하게 동작. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left 등을 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다.


fixed

 뷰포트(viewport)에 상대적으로 위치가 지정된다. 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top, right bottom, left 프로퍼티가 사용된다.

 고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않는다.


모바일 브라우저의 경우, 고정 엘리먼트 지원이 굉장히 불안정하다.


absolute

 뷰포트에 상대적으로 위치가 지정되는 것이 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다. 기준으로 삼을 조상 엘리먼트가 없으면 본문을 기준으로 삼고, 페이지 스크롤에 따라 이동안다. 즉, position: static이지 않은 가까운 조상을 기준 삼는다.




참고: http://ko.learnlayout.com/position.html

반응형

'HTML&CSS' 카테고리의 다른 글

[CSS] Clear Property  (0) 2018.06.15
[CSS] Float Property  (0) 2018.06.14
[CSS] Position Property  (0) 2018.06.12
[CSS] Display Property  (0) 2018.06.11
[CSS] !important, IE placeholder 색상 적용되지 않는 문제.  (0) 2018.02.22
[HTML] SPAN  (0) 2017.08.25