position

This translation is incomplete. Please help translate this article from English

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.

배치 유형

  • 위치 지정 요소position계산값relative, absolute, fixed, sticky 중 하나인 요소입니다. 즉, 값이 static이 아닌 모든 요소를 말합니다.
  • 상대 위치 지정 요소position계산값relative인 요소입니다. topbottom은 원래 위치에서의 세로축 거리를, leftright은 원래 위치에서의 가로축 거리를 지정합니다.
  • 절대 위치 지정 요소position계산값absolute 또는 fixed인 요소입니다.top,right, bottom, left는 요소컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성합니다.
  • 끈끈한 위치 지정 요소position계산값sticky인 요소입니다. 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값(top 등으로 지정)을 넘으면 마치 fixed처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.

대부분의 경우, heightwidthauto로 지정된 절대 위치 지정 요소는 내용에 맞도록 크기를 조절합니다. 하지만 비대체 절대 위치 지정 요소는topbottom을 지정하고,height는 지정하지 않음으로써 (즉, auto로 두어서) 사용 가능한 수직공간을 채울 수 있습니다. 마찬가지로leftright를 지정하고, widthauto로 두면, 사용 가능한 모든 수평 공간을채웁니다.

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

  • topbottom을 지정한 경우(auto 제외), top이 우선 적용됩니다.
  • leftright를 지정한 경우, directionltr(영어, 한국어 등)이면 left를 우선 적용합니다. {{Cssxref("direction")}}이 rtl(페르시아어, 아랍어, 히브리어 등)이면right을 우선 적용합니다.

구문

position 속성은 아래의 목록에서 선택한 하나의 키워드 값을 사용해 지정할 수 있습니다.

static
요소를 문서의 일반적인 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.
relative
요소를 문서의 일반적인 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 페이지의 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-caption 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.
absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.
fixed
요소가 일반적인 문서(document) 흐름에서 제거됩니다. 페이지 레이아웃에서 요소에 대한 공간이 생성되지 않습니다. 대신, 스크린의 '뷰포트(viewport)를 기준으로 한 위치'에 배치됩니다. 따라서 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다. top, right, bottom,left값에 의해 최종 위치가 결정됩니다.이 값은 항상 새로운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)

형식 구문

static | relative | absolute | sticky | fixed

예제

상대 위치 지정

상대적으로 배치된 요소들은 문서 내에서 정상적인(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;
}

절대 위치 지정

상대적으로 배치 된 요소는 도큐먼트의 정상적인 흐름상에 있습니다.대조적으로, 절대적으로 배치 된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 가장 가까운 위치에 있는 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는 요소를 포함하는 컨테이닝블럭이 뷰포트라는 점에서 다릅니다. 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는,부유하는(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, bottom,left 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정해주지 않으면 상대위치 지정과 다를 바가 없습니다.

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;
}

접근성 고려사항

Ensure that elements positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size.

Performance & Accessibility

Scrolling elements containing fixed or sticky content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.

명세

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
positionChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
Notes Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
Notes Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
Absolutely-positioned flex childrenChrome Full support 52Edge Full support 12Firefox Full support 52IE Full support 10Opera Full support 39Safari Full support 11WebView Android Full support 52Chrome Android Full support 52Firefox Android Full support 52Opera Android Full support 41Safari iOS Full support 11Samsung Internet Android Full support 6.0
fixedChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 44, position: fixed didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
IE Full support 7
Notes
Full support 7
Notes
Notes In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.
Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 44, position: fixed didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
Table elements as sticky positioning containersChrome Full support 56Edge Full support 16Firefox Full support 59IE No support NoOpera Full support 43Safari Full support 8WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 59Opera Android Full support 43Safari iOS Full support 8Samsung Internet Android Full support 6.0
stickyChrome Full support 56Edge Full support 16Firefox Full support 32
Full support 32
No support 26 — 48
Disabled
Disabled From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 43Safari Full support 6.1
Prefixed
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 32
Full support 32
No support 26 — 48
Disabled
Disabled From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 43Safari iOS Full support 6.1
Prefixed
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.