---
title: <position>
slug: Web/CSS/position_value
tags:
  - CSS
  - CSS Data Type
  - Layout
  - Reference
  - Web
translation_of: Web/CSS/position_value
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>&lt;position&gt;</code></strong> (또는 <strong><code>&lt;bg-position&gt;</code></strong>) <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. {{cssxref("background-position")}}, {{cssxref("offset-anchor")}} 속성에서 사용합니다.</p>

<div class="note">
<p><strong>참고:</strong> <code>&lt;position&gt;</code> 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.</p>
</div>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>&lt;position&gt;</code> 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.</p>

<p>키워드에는 <code>center</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, <code>center</code>는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.</p>

<p>오프셋은 상대적인 {{cssxref("&lt;percentage&gt;")}} 값 또는 절대적인 {{cssxref("&lt;length&gt;")}} 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.</p>

<p>하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 <code>center</code>를 사용합니다.</p>

<pre class="brush:css notranslate">/* 1-value syntax */
<var>keyword</var>                  /* Either the horizontal or vertical position; the other axis defaults to center */
<var>value</var>                    /* The position on the x-axis; the y-axis defaults to 50% */

/* 2-value syntax */
<var>keyword</var> <var>keyword</var>          /* A keyword for each direction (the order is irrelevant) */
<var>keyword</var> <var>value</var>            /* A keyword for horizontal position, value for vertical position */
<var>value</var> <var>keyword</var>            /* A value for horizontal position, keyword for vertical position */
<var>value</var> <var>value</var>              /* A value for each direction (horizontal then vertical) */

/* 4-value syntax */
<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* Each value is an offset from the keyword that preceeds it */
</pre>

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

<pre class="syntaxbox notranslate">[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
 [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
|
 [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
 [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
]
</pre>

<div class="blockIndicator note">
<p><strong>참고</strong>: {{cssxref("background-position")}} 속성은 세 값 구문도 허용하나, <code>&lt;position&gt;</code>을 사용하는 다른 속성에서는 허용하지 않습니다.</p>
</div>

<h2 id="보간">보간</h2>

<p>애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정하므로, 점은 직선을 따라 이동하게 됩니다.</p>

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

<h3 id="유효한_위치">유효한 위치</h3>

<pre class="notranslate">center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
</pre>

<h3 id="유효하지_않은_위치">유효하지 않은 위치</h3>

<pre class="example-bad notranslate">left right
bottom top
10px 15px 20px 15px
</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Relists links to both definitions: if {{SpecName('CSS3 Backgrounds')}} is supported, its definition of <code>&lt;position&gt;</code> must also be used.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '&lt;bg-position&gt;')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Defines <code>&lt;position&gt;</code> explicitly and extends it to support offsets from any edge.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Allows combination of a keyword with a {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} value.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Defines <code>&lt;position&gt;</code> anonymously as the value of {{cssxref("background-position")}}.</td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("css.types.position")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 값과 단위</a></li>
 <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 값과 단위 소개</a></li>
 <li>{{cssxref("background-position")}}</li>
 <li>{{cssxref("radial-gradient()")}}</li>
 <li>{{cssxref("conic-gradient()")}}</li>
</ul>