CSS position 속성 - CSS 위치 지정

CSS의 position 속성으로 문서 상의 요소 배치방법을 지정할 수 있다.

값에 따라 배치 방법이 다른데, 값마다의 방법을 소개한다.

 

static

기본값이다. top, left, right, bottom, z-index 속성이 적용되지 않는다.

---

relative

자기 자신의 위치를 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다.

오프셋은 다른 요소에 영향을 주지 않으며, 페이지 레이아웃에서 요소가 차지하는 공간은 static과 같다.

 

자신이 있던 위치 기준(빨간 선)으로 50px씩 이동하였다.

position: relative;
  left: 50px;
  top: 50px;

---

absolute

가장 가까운 부모 요소의 위치를 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다.

위치값이 있는 가까운 부모 요소가 없을 경우, 컨테이닝 블록 기준으로 위치를 지정한다.

* 컨테이닝 블록 : 문서의 컨텐츠, padding, margin, border 영역

가장 가까운 부모 요소인 1번 DIV 기준으로 50px씩 이동하였다.

position: absolute;
  left: 50px;
  top: 50px;

---

fixed

뷰포트의 초기 컨테이닝 블록의 위치를 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다.

또한, 페이지 레이아웃에서 공간을 차지하지 않기 때문에 자유로운 배치가 가능하다.

브라우저별로 결과가 다를 수 있다.

* 뷰포트 : 현재 화면에 보여지는 문서 영역

문서 영역을 기준으로 위치가 지정이 되었기 때문에, 1번 DIV의 사이즈가 100px이고 100px을 이동했으나

살짝 겹친 모습을 확인할 수 있다.

position: fixed;
  left: 100px;
  top: 100px;

이렇게 div를 한 줄에 여러 개 배치하는 것도 가능하다.

// HTML
<div class="a">1번 DIV<div>
<div class="b">2번 DIV<div>
<div class="c">3번 DIV<div>

// CSS
div{
  width:100px;
  height:100px;
}
.a{
  background-color:#0489B1;
  position: fixed;
  left: 0px;
  top: 0px;
}
.b{
  background-color:#00BFFF;
  position: fixed;
  left: 100px;
  top: 0px;
}
.c{
  background-color:#58D3F7;
  position: fixed;
    left: 200px;
  top: 0px;
}

---

float

float은 요소의 좌측이나 우측에 배치시킬 때 사용한다. left, right 값에 따라 위치가 지정된다.

 

float 값에 따라 요소의 위치가 변경된다.

// 좌측정렬
float: left;

// 우측정렬
float: right;

---

clear

float 요소가 다른 요소를 가리거나 영향을 줄 때, clear 속성을 사용하면 float 값이 무효화된다.

left, right, both값에 따라 무효화할 위치가 지정된다.

 

// 속성이 해제되지만 아래로 내려가지 않음
clear: none;
// 왼쪽 속성 해제
clear: left;
// 오른쪽 속성 해제
clear: right;
//양쪽 속성이 해제되어 아래로 내려감
clear: both;

---

sticky

가장 가까운 스크롤이 있는 부모 요소 혹은 가장 가까운 컨테이닝 블록을 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다. 스크롤 이벤트가 일어나도 요소가 같은 위치에 계속 고정되어 있으며 만약 가장 가까운 부모 요소가 스크롤이 불가하고, 실제 스크롤되는 요소가 따로 있을 경우에는 고정이 되지 않는다.

IE 11에서는 지원하지 않는다. 사파리에서는 -webkit-sticky로 사용해야 한다.

스크롤을 움직여도 위치가 고정되어 있다.

position: sticky;
// 사파리 브라우저용
position: -webkit-sticky;

---

display

요소의 배치 시 사용할 레이아웃을 설정해 준다. 다양한 설정값이 있다.

 

none

요소를 숨김 처리한다

table

요소를 <table>처럼 작동하게 할 수 있다.

inline

   공간이 있을 경우 요소를 줄바꿈 없이 오른쪽에 배치시킨다. 크기 조정은 불가능하며 margin은 inline-height로 설정한다.

inline-block

inline과 동일하나 크기와 margin 설정이 가능하다.

 

inline 1 : div에 전체적으로 준 width, height 속성이 적용되지 않았음

inline 2 : none 속성으로 숨겨짐

inline-block 3,4 : width, height, margin 적용됨

// HTML
<div class="a">inline 1</div><div class="b">inline 2</div>
<div class="c">inline-block 3</div><div class="d">inline-block 4</div>

// CSS
div{
  width:100px;
  height:100px;
}
.a{
  background-color:#0489B1;
  display: inline;
}
.b{
  background-color:#eee;
  display: none;
}
.c{
  background-color:#A9A9F5;
  display: inline-block;
  width: 200px;
  height: 150px;
  margin: 10px;
}
.d{
  display: inline-block;
  background-color:#F5A9D0;
  width: 300px;
}