CSS position의 속성 - relative, absolute, fixed

이산·2022년 3월 1일

기술블로그

목록 보기

2/42

Position

position 속성은 웹 문서 안의 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정하는 속성이다. 태그를 어떻게 위치시킬지를 정의하며, static, relative, absolute, fixed, sticky 총 5가지의 값을 갖는다. position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다. 또한, 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다.

Relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치가 아닌 다른 곳에 위치시킬 수 있다. 요소가 원래 있었던 위치를 기준으로 top, bottom, left, right 속성을 이용하여 상하좌우로를 얼마나 떨어질게 할지 정할 수 있다. 요소가 원래 있던 위치를 기준으로 상대적(relative)으로 배치한다고 생각하면 쉽게 이해할 수 있다.

Absolute

position 속성값 중 가장 주의해서 사용해야 하는 속성값은 absolute이다. 아마도 absolute라는 영단어의 의미 때문에 relative와 정 반대의 개념이라고 오해를 한다. 하지만 absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많다.
position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾으며 첫 번째 상위 요소가 해당 요소의 배치 기준이된다. 상위 요소가 없다면 body 요소가 배치 기준이 된다.
가장 가까운 상위 요소를 기준으로 top, left, bottom, right 속성을 적용하며 어떤 요소의 display 속성을 absolute로 설정하면, 가까운 상위 요소의 display 속성을 relative로 지정해 주는 것이 대부분이다.

Relative와 Absolute를 이용해 작성한 검색창

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

html을 이용해서 div안에 input과 img를 불러왔다.

.dv{
  position:relative;
  width: 300px;
}
.search{
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
.icon{
  position: absolute;
  width: 17px;
  top: 10px;
  right: 12px;
  margin: 0;
}

상위 요소인 div를 relative 하고 돋보기 img를 absolute하여 위치를 조정했다. input도 absolute하여 div에 맞추려고 했지만 생각대로 되지 않았다. 왜 동작이 안되는지 조금 더 알아보아야 겠다. 그래도 원하는 형태로 출력이 되었다.

Fixed

Fixed는 화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 함께 움직이는 UI를 구현할때 사용한다. position 속성을 fixed로 지정하면 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.
fixed 속성값의 배치 기준은 브라우저 전체화면이다. top, left, bottom, right 속성을 적용하여 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소의 위치를 결정한다.

Position:fixed 구현

<header class="head_img">
      <img class="img" src="https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_small.svg" width="20px" height="48px">
    </header>

Html을 이용하여 header 안에 img를 불러왔다.

head_img{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 48px;
  background-color: rgba(45,45,45,0.95); 
}
.img{
  position: absolute;
  left: 50%;
  margin-left: -10px;
}