티스토리 뷰

Language/CSS

[CSS] position (relative, absolute)

무화과(Fig) 2022. 6. 3. 13:24

 

 

1. Position의 정의

Position는 요소를 원하는 위치에 자유롭게 이동시키기 위해 사용하는 property이다.

 

 

 

2. Position의 사용방법

Position을 사용하는 방법은 

 

1. 기준점을 잡는다 (예- position: absolute;)

2. 이동시킨다. (예- bottom: 100px;)

 

이렇게 나눌 수 있으며 1번을 실행하기 위해서는 position의 속성을 알아야 한다.

 

 

 

3. Position 속성

Position은 static, relative, absolute, fixed, sticky 총 5개의 속성을 가지며 각각의 기준점은 다음과 같다.

 

 

static 기준점 없음, 기본값(가장 일반적인 상태)
relative 자기 자신을 기준으로 함
absolute 자신의 부모(조상)을 기준으로 함
fixed viewport를 기준으로 함
sticky 스크롤 영역을 기준으로 함

 

 

기준점을 정했다면 top, bottom, left, right을 이용해 요소의 위치를 조정하면 된다.

 

 

 

4. top, bottom, left, right 속성

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

 

 

5. Position: relative

요소 자신을 기준점으로 하는 속성이다. 위치를 이동하면서 다른 요소에 영향을 주지 않는다. 따라서 원래 위치를 기준으로 top, bottom, left, right에서 얼마만큼 떨어질지 정하면 된다.

 

 

 

 

6. Position: absolute

가장 가까운 곳에 있는 조상을 기준점으로 하는 속성이다. 조상을 기준으로 top, bottom, left, right에서 얼마만큼 떨어질지 정하면 된다. 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다.(static 제외)

 

 

 

 

 

7. 부모 position 없음 & 자식 absolute 인 경우

만약 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.

 

 

 

 

 

8. Position: fixed

화면을 스크롤 하더라도 항상 같은 자리에 고정이 되는 UI를 본 적 있을 것이다.

보통 라이브 채팅 버튼을 구현할 때 많이 사용하는 기법으로 position을 fixed로 지정하면 요소를 고정시킬 수 있다.

 

이것이 가능한 이유는 position: fixed가 자기 자신이나 부모가 아닌 뷰포트(viewport)를 기준으로 움직이기 때문이다.

 

*뷰포트=브라우저 전체화면

 

top, right, bottom, left 속성으로 요소의 위치를 ​​지정할 수 있으며 요소 지정시 여백이 남지 않기 때문에 필요시 margin 값을 주는 것이 이상적이다.

 

 

'Language > CSS' 카테고리의 다른 글

[CSS] flex 속성 정리 (flex-basis, flex-grow, flex-shrink)  (0) 2024.03.12
[CSS] active와 focus의 차이  (0) 2023.10.20
[CSS] overflow  (0) 2023.07.27
[CSS] transform(translate, scale, rotate, skew)  (0) 2023.07.26
[CSS] box-sizing 속성  (0) 2022.06.12