[HTML/CSS] position속성 개념 및 예시

position 속성

• static : 모든 태그들의 기본 상태
• relative : 태그의 위치를 살짝 변경하고 싶을 때 사용, static인 상태를 기준으로 주어진 픽셀만큼 움직인다.
• absolute : position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.
  만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이다.
• fixed : 항상 특정 위치에 고정

 

position 예시1

 

See the Pen position by 정혜선 (@Diligent-milk) on CodePen.

 

position 예시2

아래 예시에서 다음과 같은 코드를 썼는데

right: 0  ----> 오른쪽 끝으로 배치

bottom: 0 ---> 맨 아래로 배치

라는 뜻이다.

See the Pen position2 by 정혜선 (@Diligent-milk) on CodePen.

 

position 예시3

아래 예시는 position을 fixed(고정)으로 두고 Top박스를 누르면 Top페이지로 이동하게 만들었다.

See the Pen position3 by 정혜선 (@Diligent-milk) on CodePen.