MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
fixed
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. When an ancestor has the transform property set to something other than none, that ancestor is used as the container instead of the viewport (see CSS Transforms Spec). In printed documents, the element is placed in the same position on every page.
sticky 
The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. The effect of sticky on table-related elements is the same as relative. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: Github issue on W3C CSSWG)

Formal syntax

static | relative | absolute | sticky | fixed

Examples

Relative positioning

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.

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

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <body> of the document.

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 positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.

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

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed. For instance...

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

...would position a <div> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the <div> would be fixed to 10 pixels from the top.

A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.
 
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
 

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,