HTML13강 - position 속성

See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.

위의 codePen을 통해서 각 스타일에 대한 특징을 알아보고 내용을 읽어보세요.
0.5배로 보면 조금 더 편하실겁니다!

🟰Position 스타일

☀️static
요소의 기본 값이다.

☀️relative
다른 요소의 위치 기준이 될 수 있다. 
기준이 되는 요소에 relative를 걸고 하위요소에 absolute를 걸면 기준점이 relative를 걸어준 요소가 된다.

☀️absolute
기준(relative)을 중심으로 자신만의 위치를 가진다.
스크롤의 영향을 받는다.
드랍메뉴를 만들때 쓰인다.

☀️fixed
기준을 중심으로 자신만의 위치를 가진다.
스크롤의 영향을 받지 않는다.
다른 페이지의 우측에 스크롤을 내려도 항상 고정되는 메뉴바와 같은 것들

☀️sticky
평소에는 static처럼 배치되지만, 기준점에 도달하면 fixed와 같다.
일정 스크롤을 내리면 고정이 되는 메뉴바들과 같다.