[CSS] CSS Position

CSS Position

CSS Position 요약

• position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.
• top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.
• 사용법은 간단하다.
  1. 기준을 잡는다. (예- position: relative;)
  2. 이동시킨다. (예- top: 50px;)

---

🎈알아두기

• block
• inline

block : 한 줄 모두 차지 (대표 element - <div>, <p> )

inline : 콘텐츠 크기 만큼만 차지 (대표 element - <span>)

 

1. Position 속성

요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.

값의미

static	기준 없음 (배치 불가능 / 기본값)
relative	요소 자기 자신을 기준으로 배치
absolute	부모(조상) 요소를 기준으로 배치
fixed	뷰포트 기준으로 배치
stickey	스크롤 영역 기준으로 배치

---

Top, Bottom, Left, Right 속성

기준점을 잡았으면 다음 네 가지 속성을 이용해서 요소의 위치를 옮길 수 있다.

요소의 Position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.

• top : 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정
• bottom : 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정
• left : 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정
• right : 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정

---

1-1. Relative

요소를 일반적인 문서 흐름에 따라 배치한다.

요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.

• 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
• 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
• 문서 상 원래 위치가 그대로 유지된다.
  
  
  
  
  
  
  출처 
  https://creamilk88.tistory.com/197