Post

CSS) position 속성

Posted Updated
Preview Image
By parksohyunnn 9 min read

오늘은 css position 속성에 대해 알아보도록 하겠습니다.

css position 속성이란?

  • CSS의 position 속성은 요소의 위치를 결정하는 데 사용됩니다. 요소의 위치를 지정하려면 position 속성을 사용하고, 이후에 top, right, bottom, left 속성을 사용하여 요소를 정확한 위치에 배치할 수 있습니다.

css position 속성 형식

1
2
3
4

selector {
    /* position: <속성값>; */
    position: value;
}
  • selector는 스타일을 적용할 HTML 요소를 선택하는 CSS 선택자입니다.
  • position은 속성 이름으로, 요소의 위치를 지정하는 데 사용됩니다.
  • value는 속성의 값으로, 요소를 배치하는 방법을 나타냅니다.
  • 위에서 설명한 static, relative, absolute, fixed, sticky 중 하나의 값이 올 수 있습니다.

css position 속성 종류

속성값설명
static요소가 문서의 일반적인 흐름에 따라 배치됩니다. 즉, 다른 위치 지정 속성이 없을 때의 기본 값입니다.
relative요소를 일반적인 문서 흐름에 따라 배치한 후, 자기 자신을 기준으로 상대적인 위치를 이동시킵니다. 다른 요소들의 위치에는 영향을 미치지 않습니다.
absolute요소를 문서 흐름에서 제거하고, 가장 가까운 위치 지정 상자(relative, absolute, fixed, sticky)를 기준으로 배치합니다. 부모 요소 중 위치 지정이 된 요소를 찾지 못하면 최초의 조상 요소(body)를 기준으로 합니다.
fixed요소를 뷰포트에 상대적으로 배치합니다. 스크롤되어도 항상 뷰포트의 동일한 위치에 유지됩니다.
sticky요소를 일반적인 문서 흐름에 따라 배치한 후, 스크롤되는 동안 특정 위치에 고정시킵니다. 스크롤되는 요소의 상위 요소 내에서 지정된 위치로 고정됩니다.

1. static 속성

  • position: static;은 CSS에서 요소의 위치를 따로 지정하지 않을 때의 기본값입니다. 즉, 대부분의 요소들은 기본적으로 position: static;을 가지며, 문서 흐름에 따라 배치됩니다.

  • 이 속성은 보통 다른 position 값들을 사용하고 싶지 않을 때, 혹은 다른 position 값들이 이미 적용된 요소를 원래의 위치로 되돌리고 싶을 때 사용됩니다

1
2
3
4
5

/* CSS */
.static-example {
    position: static;
    /* 다른 위치 지정 속성들이 없으므로 문서 흐름에 따라 배치됩니다. */
}

2. relative 속성

  • position: relative;를 사용하면 요소를 기존 위치를 기준으로 상대적으로 이동시킬 수 있습니다. 이동된 요소는 일반적인 문서 흐름에 따라 다른 요소들의 배치에는 영향을 주지 않습니다.
1
2
3
4

/* CSS */
.selector {
    position: relative;
}
  • .selector는 스타일을 적용할 HTML 요소를 선택하는 CSS 선택자입니다.
  • position: relative;은 요소를 기존 위치를 기준으로 상대적으로 이동시키는 것을 나타냅니다.

3. absolute 속성

  • position: absolute;는 요소를 문서의 흐름에서 제거하고, 부모 요소 중에서 position: relative;, position: absolute;, position: fixed;, 또는 position: sticky;를 가진 가장 가까운 부모 요소를 기준으로 배치합니다. 만약 부모 요소 중에서 위의 어떤 값도 없다면, 문서(body)를 기준으로 배치됩니다.
1
2
3
4
5
6
7

/* CSS */
.absolute-example {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  • 위의 코드에서는 .absolute-example 클래스를 가진 요소를 절대적으로 위치시키는 방법을 보여줍니다. top: 50%;와 left: 50%;를 사용하여 요소를 부모 요소의 상단 중앙에 배치하고, transform: translate(-50%, -50%);을 사용하여 요소의 중심을 부모 요소의 중심으로 이동시킵니다. 이렇게 함으로써 요소를 부모 요소의 중앙에 정확히 위치시킬 수 있습니다.

4. fixed 속성

  • position: fixed;는 요소를 뷰포트(브라우저 창)에 상대적으로 고정시키는 데 사용됩니다. 이렇게 고정된 요소는 스크롤되어도 항상 뷰포트의 동일한 위치에 유지됩니다.
1
2
3
4
5

.fixed-example {
    position: fixed;
    top: 0;
    right: 0;
}
  • 위의 코드에서는 .fixed-example 클래스를 가진 요소를 뷰포트의 오른쪽 상단에 고정하는 방법을 보여줍니다. top: 0;과 right: 0;을 사용하여 요소를 뷰포트의 오른쪽 상단으로 이동시킵니다.
1
2
3

<div class="fixed-example">
    이 요소는 뷰포트에 고정됩니다.
</div>

  • 위의 HTML 코드에서는 .fixed-example 클래스를 가진 요소를 생성하고, 이를 뷰포트의 오른쪽 상단에 고정합니다.

  • position: fixed;는 요소를 뷰포트에 상대적으로 고정시키는 데 사용되며, 스크롤되어도 항상 동일한 위치에 유지됩니다.

5. sticky 속성

  • position: sticky;는 요소를 일반적인 문서 흐름에 따라 배치한 후, 스크롤되는 동안 특정 위치에 고정시키는 데 사용됩니다. 스크롤되는 요소의 상위 요소 내에서 지정된 위치로 고정됩니다.
1
2
3
4
5

/* CSS */
.sticky-example {
    position: sticky;
    top: 20px;
}
  • 위의 코드에서는 .sticky-example 클래스를 가진 요소를 스크롤되는 동안 상위 요소의 상단에서 20px 위치에 고정하는 방법을 보여줍니다.
1
2
3
4
5
6

<div class="container">
    <div class="sticky-example">
        이 요소는 스크롤되는 동안 상위 요소의 상단에서 20px 위치에 고정됩니다.
    </div>
    <!-- 다른 내용 -->
</div>

  • 위의 HTML 코드에서는 .container 클래스를 가진 요소 내에 .sticky-example 클래스를 가진 요소를 생성하고, 이를 상위 요소의 상단에서 20px 위치에 고정합니다.

  • position: sticky;는 스크롤되는 요소의 상위 요소 내에서 특정 위치로 고정시킬 수 있습니다. 일반적인 문서 흐름에 따라 배치된 후, 스크롤되는 동안 지정된 위치에 고정되므로 유용하게 사용될 수 있습니다.

CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github