position 속성은 도큐먼트(document) 상에 요소를 배치하는 방법을 지정한다. top, right, bottom,  left 속성들은 요소가 최종적으로 배치될 위치를 지정한다.

/* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: unset;

초기값static
적용대상all elements
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

포지셔닝(positioning)의 유형

  • 배치되는(positioned) 요소는 상대위치, 절대위치, 고정위치(fixed와 sticky)로 계산된 위치 값을 갖습니다. (즉, static을 제외한 전부)
  • position이 relative이면 위치 값이 상대적으로 계산되어 배치됩니다. topbottom 속성은 기본(normal) 위치에서부터 수직 방향으로 얼만큼 떨어질 지는 곳(offset)에 위치할 것인가를 설정합니다. left와 right 속성은 기본 위치로부터 수평 방향으로 얼만큼 떨어지는 곳에 위치할 지를 설정합니다.
  • absolute 나 fixed는 절대적인 위치를 계산합니다. top, right, bottomleft 속성은 해당 요소를 감싸고 있는 부모나 조상 요소를 기준으로 모서리(edges)에서부터의 거리를 지정합니다. (이때 relative가 지정되어 있는 부모/조상 요소를 기준으로 한다.) 만약 요소에 마진이 있다면, 거리(offset)에 추가됩니다.
  • sticky는 해당 요소를 감싸고 있는 컨테이닝 블록이 지정된 임계값을 넘어서기 전까지는 relative로 작동하며 임계값을 넘기면 fixed로 작동합니다.

대부분의 경우, heightwidth auto로 지정된 절대 위치(absolute) 요소는 내용(contents)에 맞게 사이즈가 조정됩니다. 하지만 대체불가능한 절대 위치 요소는 top과 bottom을 지정하고, height는 지정하지 않음으로써(즉, auto로 두어서) 사용 가능한 수직 공간을 채울 수 있습니다. 마찬가지로 leftright를 지정하고, width 는 auto로 두면, 사용 가능한 수평 공간을 채우게 할 수 있습니다.

방금 설명한 경우들 이외에도:

  • top과 bottom이 지정된 경우(auto가 아닌 테크니컬하게 지정한), top이 우선 적용됩니다.
  • left와 right가 지정된 경우, direction이 ltr(left to right, 글 읽는 방향을 의미) (영어, 일어, 한국어 등) 이면 left가 우선 적용됩니다. direction이 rtl(right to left) (페르시아어, 아랍어, 히브리어 등)이면 right가 우선 적용됩니다.

문법 Syntax

position 속성은 아래의 목록에서 선택된 단일 키워드로 지정됩니다. 

Values

static
기본값(default)입니다. static이 지정된 요소는 document의 일반적인 흐름(normal flow)을 따라 배치됩니다. top, right, bottom, left, z-index 속성들이 static에서는 아무런 효과도 주지 못합니다. 
relative
 relative가 지정된 요소 역시 document의 일반적인 흐름(normal flow)을 따라 배치됩니다. 그리고 요소 자신에 대한 상대적인 top, right, bottomleft 속성에 의한 좌표로 배치됩니다. (relative는 별도의 거리 속성을 주지 않으면 static과 동일하게 동작합니다.)이때 요소의 좌표는 다른 요소들의 위치에 영향을 주지 않습니다. 따라서, 페이지 레이아웃에서 요소에게 지정된 공간은 static일 때와 동일합니다. relativez-index의 값이 auto가 아닐 경우에 새로운 stacking context를 만듭니다. table-*-group, table-row, table-column, table-celltable-caption 요소에 relative가 주는 효과는 정의되지 않았습니다.
absolute
요소가 일반적인 문서(document) 흐름에서 제거됩니다. 페이지 레이아웃에서 요소에 대한 공간이 생성되지 않습니다. 대신, 가장 가까운 위치에있는 조상에 대해 상대적 위치로 배치됩니다. 그렇지 않으면 초기 컨테이닝 블록을 기준으로 배치됩니다. 최종 위치는 top, right, bottomleft 값에 의해 결정됩니다. 이 값은 z-index가 auto가 아닌 경우에 새로운 stacking context를 생성합니다. 절대적으로 배치된(positioned) 박스(box)들은 마진을 가질 수 있으며 다른 마진에 의해 망가지지 않습니다.
fixed
요소가 일반적인 문서(document) 흐름에서 제거됩니다. 페이지 레이아웃에서 요소에 대한 공간이 생성되지 않습니다. 대신, 스크린의 '뷰포트(viewport)를 기준으로 한 위치'에 배치됩니다. 따라서 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다. top, right, bottomleft 값에 의해 최종 위치가 결정됩니다. 이 값은 항상 새로운 stacking context를 생성합니다. 조상의 transform 속성이 none이 아닌 다른 것으로 설정되면, 그 조상은 뷰포트 대신에 컨테이너로 사용됩니다(CSS Transforms Spec). 인쇄된 문서(document)의 경우, 모든 페이지에서 요소가 동일한 위치에 배치됩니다.
sticky 
요소가 일반적인 문서(document) 흐름에 따라 배치됩니다. 그런 다음 top, right, bottom, left 값을 기준으로 플로우 루트(flow root) 및 해당 요소를 포함하는 블록(containing block)에 대한 상대적(relative) 위치에 자리하게 됩니다. 이 오프셋은 다른 요소들에 영향을 주지 않습니다. 이 값은 항상 새로운  stacking context를 생성합니다. 테이블과 관련된 요소들에 미치는 sticky의 효과는 relative와 동일합니다. 브라우저 사양에 따라 overflow : hidden 또는 auto 요소 내에서 작동하지 않을 수 있습니다. (참조: Github issue on W3C CSSWG)

Formal syntax

static | relative | absolute | sticky | fixed

예시 Examples

상대적 포지셔닝 Relative positioning

상대적으로 배치된 요소들은 문서 내에서 정상적인(normal) 포지션에서 일정량만큼 위치하게 되지만, 다른 요소들의 오프셋에는 영향을 주지 않습니다. 아래 예제에서,  "Two"가 정상적인(normal) 위치의 공간을 차지하고 있는 것처럼, 다른 요소들이 어떻게 위치하게 되는지 주목하세요.

HTML

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

절대적 포지셔닝 Absolute positioning

상대적으로 배치 된 요소는 도큐먼트의 정상적인 흐름 상에 있습니다. 대조적으로, 절대적으로 배치 된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 가장 가까운 위치에 있는 static이 아닌 조상 요소를 기준으로 상대적(relative) 위치에 배치됩니다. 만약 배치된 조상 요소가 존재하지 않다면, 초기 컨테이너가 기준이 됩니다. 아래 예제에서, 박스 "Two"는 배치된 조상요소가 존재하지 않습니다. 따라서 도큐먼트의 <body>를 기준으로 상대적 위치에 배치됩니다.

HTML

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}

고정 포지셔닝 Fixed positioning

고정 포지셔닝은 절대적 포지셔닝과 유사합니다. 다만 fixed는 요소를 포함하는 컨테이닝 블럭이 뷰포트라는 점에서 다릅니다. 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, 부유하는(floating) 요소를 생성할 수 있습니다. 아래 예제에서, 박스 "One"은 페이지 상단에서 80 픽셀, 좌측에서 10 픽셀 떨어진 위치에 고정됩니다. 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된 채로 유지됩니다.

HTML

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

스티키 포지셔닝 Sticky positioning

스티키 포지셔닝은 relative와 fixed의 하이브리드 입니다. 스티키로 배치된 요소는 특정 임계값(threshold)을 지나기 전까지는 상대적인 위치를 갖습니다. 그리고 그 특정 지점에 도달하면 고정 위치를 갖게 됩니다. 예를 들어,

div { position: sticky; top: 10px; }

위 코드는 뷰포트가 스크롤되어 요소가 상단(top)으로부터 10픽셀 미만이 될 때까지, 상대적으로 <div>를 배치합니다. 그 임계값(10px)을 넘는 순간, <div>는 상단(top)에서부터 10픽셀이 되는 그 위치에 고정됩니다.

스티키 포지셔닝은 흔히 알파벳 순서로 나열되는 리스트의 표제(heading)로 사용됩니다. "B" 표제는 화면 밖으로 스크롤될때 까지 "A"로 시작하는 항목들(items)의 바로 아래에 나타납니다. "B"표제는 화면이 슬라이드되면서 화면 밖으로 밀려나는 콘텐츠들과 함께 밀려나지 않고, 뷰포트 상단에 고정(fixed)됩니다. "B"표제의 항목들(items)이 스크롤되어 화면 밖으로 밀려날 때 까지 고정되어 있다가, 항목들이 화면을 벗어나는 지점에서 "C" 표제에 의해 가려지며, 이런 식으로 반복될 것입니다. (아래 예제 참고)

스티키 포지셔닝이 의도한대로 동작하게 하려면 top, right, bottomleft 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정해주지 않으면 상대위치 지정과 다를 바가 없습니다.

 

HTML

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

CSS

* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

Specifications

Specification Status Comment
CSS Level 2 (Revision 1)
The definition of 'position' in that specification.
Recommendation  
CSS Positioned Layout Module Level 3
The definition of 'position' in that specification.
Working Draft Adds sticky property value.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 (Yes) 1.0 (1.0) [1] 4.0 [3] 4.0 1.0 (85)
fixed value 1 (Yes) 1.0 (1.0) [4] 7.0 4.0 1.0 (85)
sticky value 56 ? [5] 32 (32.0) [2] No support (Yes) 6.1 -webkit-
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1 1 (Yes) 1.0 (1.0) [1] ? (Yes) 7.0 -webkit-

[1] Since Firefox 30, Gecko allows <tr>, <thead>, and  <tfoot> elements with a position: relative; style to act as absolute positioning containers. This means that a position: absolute; styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting position: relative; on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

[2] In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the about:config preference layout.css.sticky.enabled is set to true. From Firefox 27 to 31, true is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.

[3] In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.

[4] Prior to Firefox 44, position: fixed didn't create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari's long-time behavior.

[5] Sticky positioning is in preview for Edge.

문서 태그 및 공헌자

 이 페이지의 공헌자: huusz
 최종 변경: huusz,