[CSS] Position

fud904·2022년 6월 14일
0

CSS

목록 보기
1/1

css 다룰 때 항상 까다로웠던 주제라 정리해보려고 한다.

Position?

css 특성 중 position은 element에 사용되는 위치를 지정하는 방법을 말한다.
다음과 같이 다섯가지의 값을 가질 수 있다.

  • static
  • relative
  • fixed
  • absolute
  • sticky

이후 top, bottom, left, right를 통해 element의 위치를 결정할 수 있다.

static

position의 default값. 기본적으로 HTML이 배치하는 순서대로 나열된다.
defulat값이기 때문에 따로 작성하지 않아도 되며
top, bottom, left, right 속성의 영향을 받지 않는다.

relative

기존 배치되는 순서대로 나열되지만, top, bottom, left, right로 위치를 바꿀 수 있다.

fixed

viewport에 상대적으로 위치하여 페이지가 스크롤 되더라도 항상 같은 위치에 머무른다.

absolute

가장 가까운 조상 element를 기준으로 배치된다.
프로젝트를 할 때 로그인창 만들때 유용하게 사용했음.

sticky

일반적인 배치를 따라 위치하지만 가장 가까운 scrolling ancestor에 상대적으로 위치하게 됨.
웹사이트의 광고같은 요소들이 sticky를 많이 씀.

참고
https://www.w3schools.com/css/css_positioning.asp

profile
🙄

0개의 댓글