CSS | position 속성 - relative, absolute, fixed

레이아웃을 짜기 위해 사용하는 position의 속성을 알아보자

static

.static {
  position: static;
}

position의 기본값은 static이다

어떤 엘리먼트의 위치가 지정됐다면 static이외에 relative, absolute, fixed등의 값이 지정된 것이다.

위치가 지정됐다 = position이 static이 아니다

relative

.relative1{
	position: relative;
}
.relative2 {
	position: relative;
	top: 40px;
	left: 40px;
}

relative는 별도의 프로퍼티가 지정되지 않으면 static과 똑같이 동작한다.

relative2는 top과 left값을 주었기 때문에 프로퍼티 값이 없었다면 원래 있었을 위치에서 아래로 40px, 오른쪽으로 40px떨어져서 보이게 된다.

absolute

absolute는 부모에 position: relative값이 있을때,

그 부모 기준으로 프로퍼티 값을 줘서 부모에 고정시킨다.

<div>
   <input type="text" placeholder="검색어 입력">
   <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
</div>

div {     /* input과 img를 감싸고 있는 div 태그(부모)에 position: relative를 주고 */
  position: relative;
  width: 300px;
}
input {
  width: 100%;  /* input의 크기는 부모인 div에 맞추고 */
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
img {
  position: absolute;  /* img에 position: absolute를 줘서 검색창 안에 돋보기 그림이 들어가게 했다 */
  width: 17px;
  top: 10px;
  right: 12px;
  margin: 0;
}

위 코드의 결과

 

부모에 position: relative;

자식에 position: absolute;

하고 프로퍼티 값을 줘서 돋보기 그림을 검색창 오른쪽에 고정했다.

fixed

fixed는 뷰포트 기준으로 엘리먼트를 고정시키는 속성이다

스크롤을 해도 항상 화면 기준 같은 위치에 고정되는 헤더 등을 구현할 때 사용한다.

header { 
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
}

이렇게 하면 헤더가 화면 윗쪽에 고정된다.

 

 

참고페이지

https://ko.learnlayout.com/position.html