TIL#12 CSS) Position 속성

luneah·2021년 11월 18일

CSS TIL

HTML/CSS

목록 보기

2/5

Position 속성

1. static(정적)

기본값. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다.

.btn1 {
  all: unset;
  position: static;
  background-color: rgb(100, 149, 237);
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  border: 3px solid rgb(100, 149, 237);
}

[ Result ]
click버튼 생성

2. relative(상대)

별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다. 상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다.

.btn1 {
  all: unset;
  position: relative;
  top: 50px;
  left: 50px;
  background-color: rgb(100, 149, 237);
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  border: 3px solid rgb(100, 149, 237);
}

[ Result ]
click top,left 50px

3. absolute(절대)

뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작한다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다. "위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킨다는 점을 기억할 것!

.btn1 {
  all: unset;
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: rgb(228, 100, 164);
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  border: 3px solid rgb(228, 100, 164);
}

[ Result ]

4. fixed(고정)

고정 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤 되더라도 늘 같은 곳에 위치한다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.

.btn1 {
  all: unset;
  position: fixed;
  top: 100px;
  left: 100px;
  background-color: rgb(228, 162, 100);
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  border: 3px solid rgb(228, 162, 100);
}

[ Result ]

📌 absolute VS relative

위치 속성(ex| top: 50px)을 주었을 때 absolute는 < body >로부터 50px 아래의 위치에 자리하게 된다. 그러나 relative의 경우 < body > 안의 위치를 차지하는 다른 요소를 기준으로 50px 아래에 자리하게 된다. absolute 및 fixed는 위치를 차지하지 않는 요소이다. 그러나 relative와 static 및 텍스트와 같은 요소들은 자리를 차지한다.

.btn1 {
  all: unset;
  position: relative;
  top: 50px;
  background-color: rgb(100, 149, 237);
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  border: 3px solid rgb(100, 149, 237);
}

.btn2 {
  all: unset;
  position: absolute;
  top: 50px;
  background-color: rgb(237, 121, 100);
  color: white;
  padding: 5px 20px;
  cursor: pointer;
  border: 3px solid rgb(237, 121, 100);
}