path: root/files/ko/web/css/position/index.html

---
title: position
slug: Web/CSS/position
tags:
  - CSS
  - CSS Positioninng
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/position
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>position</code></strong> 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} 속성이 요소를 배치할 최종 위치를 결정합니다.</p>

<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>



<h2 id="구문">구문</h2>

<p><code>position</code> 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있습니다.</p>

<h3 id="값">값</h3>

<dl>
 <dt><code>static</code></dt>
 <dd>요소를 일반적인 문서 흐름에 따라 배치합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} 속성이 <u>아무런</u> 영향도 주지 않습니다. 기본값입니다.</dd>
 <dt><code>relative</code></dt>
 <dd>요소를 일반적인 문서 흐름에 따라 배치하고, <u>자기 자신</u>을 기준으로 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 <code>static</code>일 때와 같습니다.</dd>
 <dd>{{cssxref("z-index")}}의 값이 <code>auto</code>가 아니라면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, <code>table-caption</code> 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.</dd>
 <dt><code>absolute</code></dt>
 <dd>요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>을 기준으로 삼습니다. 최종 위치는 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 값이 지정합니다.</dd>
 <dd>{{cssxref("z-index")}}의 값이 <code>auto</code>가 아니라면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">상쇄</a>되지 않습니다.</dd>
 <dt><code>fixed</code></dt>
 <dd>요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 {{glossary("viewport", "뷰포트")}}의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 <code>transform</code>, <code>perspective</code>, <code>filter</code> 속성 중 어느 하나라도 <code>none</code>이 아니라면 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms 명세</a> 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (<code>perspective</code>와 <code>filter</code>의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 값이 지정합니다.</dd>
 <dd>이 값은 항상 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 문서를 인쇄할 때는 해당 요소가 <u>모든 페이지</u>의 같은 위치에 출력됩니다.</dd>
 <dt><code>sticky</code></dt>
 <dd>요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 <u>가장 가까운, 스크롤 되는 조상</u>과, 표 관련 요소를 포함한 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>(가장 가까운 블록 레벨 조상) 을 기준으로 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.</dd>
 <dd>이 값은 항상 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 끈끈한 요소는 "스크롤 동작"(<code>overflow</code>가 <code>hidden</code>, <code>scroll</code>, <code>auto</code> 혹은 <code>overlay</code>)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (<a href="https://github.com/w3c/csswg-drafts/issues/865">W3C CSSWG의 Github 이슈</a> 참조)</dd>
</dl>

<h2 id="설명">설명</h2>

<h3 id="배치_유형">배치 유형</h3>

<ul>
 <li><strong>위치 지정 요소</strong>란 <code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code> 중 하나인 요소입니다. 즉, 값이 <code>static</code>이 아닌 모든 요소를 말합니다.</li>
 <li><strong>상대 위치 지정 요소</strong>는<code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>relative</code>인 요소입니다. {{cssxref("top")}}과 {{cssxref("bottom")}}은 원래 위치에서의 세로축 거리를, {{cssxref("left")}}와 {{cssxref("right")}}은 원래 위치에서의 가로축 거리를 지정합니다.</li>
 <li><strong>절대 위치 지정 요소</strong>는<code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>absolute</code> 또는 <code>fixed</code>인 요소입니다.{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}는 요소의 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 생성합니다.</li>
 <li><strong>끈끈한 위치 지정 요소</strong>는 <code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>sticky</code>인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값({{cssxref("top")}} 등으로 지정)을 넘으면 마치 <code>fixed</code>처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.</li>
</ul>

<p>대부분의 경우, {{cssxref("height")}}와 {{cssxref("width")}}가 <code>auto</code>로 지정된 절대 위치 지정 요소는 자신의 콘텐츠에 맞춰 크기가 바뀝니다. 반면 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a> 절대 위치 지정 요소는 {{Cssxref("top")}}과 {{Cssxref("bottom")}}을 지정하고 {{Cssxref("height")}}는 지정하지 않으면 (즉, <code>auto</code>로 두면) 사용 가능한 수직 공간을 가득 채웁니다. 마찬가지로 {{Cssxref("left")}}와 {{Cssxref("right")}}을 지정하고, {{Cssxref("width")}}는 <code>auto</code>로 두면 사용 가능한 수평 공간을 가득 채웁니다.</p>

<p>위에서 설명한 경우(공간을 꽉 채우는 경우)가 아니라면 다음 규칙을 따릅니다.</p>

<ul>
 <li><code>top</code>과 <code>bottom</code>을 지정한 경우(<code>auto</code>가 아닌 경우), <code>top</code>이 우선 적용됩니다.</li>
 <li><code>left</code>와 <code>right</code>를 지정한 경우, {{Cssxref("direction")}}이 <code>ltr</code>(영어, 한국어 등)이면 <code>left</code>를 우선 적용하고,<font face="Open Sans, arial, sans-serif"> </font>{{Cssxref("direction")}}이 <code>rtl</code>(페르시아어, 아랍어, 히브리어 등)이면 <code>right</code>를 우선 적용합니다.</li>
</ul>

<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>

<p>화면을 확대해서 텍스트가 크게 보이게 했을 때 <code>absolute</code>나 <code>fixed</code>로 배치된 요소가 내용을 가리지 않도록 주의해야 합니다.</p>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
</ul>

<h3 id="성능_및_접근성_문제">성능 및 접근성 문제</h3>

<p><code>fixed</code>나 <code>sticky</code>를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있습니다. 브라우저는 사용자가 스크롤을 할 때마다 끈끈하거나 고정인 요소를 새로운 위치에 페인트 해야 하는데, 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 <abbr title="frames per second">fps</abbr>를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생깁니다. 이 문제의 해결책 중 하나는 {{cssxref("will-change", "will-change: transform")}}을 추가하여 요소를 자신만의 레이어에서 렌더링 하여 페인트 속도를 향상하고, 나아가 성능과 접근성을 높일 수 있습니다.</p>

<h2 id="형식_정의">형식 정의</h2>

<p>{{cssinfo}}</p>

<h2 id="형식_구문">형식 구문</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="예제">예제</h2>

<h3 id="상대_위치_지정">상대 위치 지정</h3>

<p>상대적으로 배치된 요소는 문서 내에서 정상적인(normal) 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않습니다. 아래 예제에서는 다른 요소들이 "Two"가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
</pre>

<p>{{ EmbedLiveSample('상대_위치_지정', '600px', '200px') }}</p>

<h3 id="절대_위치_지정">절대 위치 지정</h3>

<p>상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리, 절대적으로 배치된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 <em>가장 가까운 위치 지정 조상</em>(즉, <code>static</code>이 아닌 가장 가까운 조상)을 기준으로 배치됩니다. 그런 요소가 존재하지 않는다면, 초기 컨테이닝 블록이 기준이 됩니다.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
&lt;div class="box" id="four"&gt;Four&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}</pre>

<p>{{ EmbedLiveSample('절대_위치_지정', '800px', '200px') }}</p>

<h3 id="고정_위치_지정">고정 위치 지정</h3>

<p>고정 위치 지정은 절대 위치 지정과 비슷하지만, <code>fixed</code>는 요소의 컨테이닝 블록이 <em>뷰포트</em>의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>이라는 점에서 다릅니다(<code>transform</code>, <code>perspective</code>, <code>filter</code> 속성이 <code>none</code>이 아닌 조상이 있다면 그 조상이 컨테이닝 블록이 됩니다. <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> 참조). 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있습니다. 아래 예제에서, "One" 상자는 페이지 위에서 80픽셀, 왼쪽에서 10픽셀 떨어진 위치에 고정됩니다. 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된 채로 유지됩니다.</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="outer"&gt;
  &lt;p&gt;
    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.
  &lt;/p&gt;
  &lt;p&gt;
    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.
  &lt;/p&gt;
  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css notranslate">.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;
}
</pre>

<p>{{ EmbedLiveSample('고정_위치_지정', '800px', '300px') }}</p>

<h3 id="끈끈한_위치_지정">끈끈한 위치 지정</h3>

<p>끈끈한 위치 지정은 상대와 고정 위치 지정을 합친 것으로 생각할 수 있습니다. 끈끈하게 배치된 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게 됩니다. 예를 들어,</p>

<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre>

<p>이때 id가 one인 요소는 그 위치가 위에서 10픽셀 떨어진 위치까지는 상대적으로 배치되지만, 그 경계를 넘어가면 위에서 10픽셀 떨어진 위치에 고정됩니다.</p>

<p>끈끈한 위치 지정은 흔히 사전순 리스트의 레이블에 사용할 수 있습니다. 예를 들어, "ㄴ" 레이블은 "ㄱ"으로 시작하는 목록이 화면 밖으로 나갈 때까지는 그 바로 밑에 표시되고, 그 다음에는 "ㄱ"을 따라 화면 밖으로 나가는 대신 화면 위에 고정시킬 수 있습니다. 그러다가 "ㄴ" 목록이 화면 바깥으로 나가면 그 자리에 "ㄷ" 레이블을 고정시킬 수 있습니다.</p>

<p>끈끈한 위치 지정이 의도한 대로 동작하게 하려면 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정하지 않으면 상대 위치 지정과 다를 바가 없습니다.</p>

<h4 id="HTML_4">HTML</h4>

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

<h4 id="CSS_4">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

dl &gt; 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;
}
</pre>

<p>{{ EmbedLiveSample('끈끈한_위치_지정', '500px', '300px') }}</p>

<ul>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">비고</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td><code>sticky</code> 속성 값 추가</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div>{{Compat("css.properties.position")}}</div>