css - position 종류

css position 종류

▶ css에서 position 속성은 요소를 배치하는 방법을 제어하기 위해서 사용되는 속성을 말하며, position의 종류는 아래와 같습니다.
그럼 이제 각각의 속성 특징에 대해 알아볼까요?

<style>
.body {
    position: relative;
    position: absolute;
    position: fixed;
    position: inherit;
    position: initial;
    position: static;
    position: sticky;
    position: unset;
}
</style>

1. position: relative;

▶ position: relative;는 요소를 자신의 원래 위치를 기준으로 상대적으로 이동시키는 데 사용되며, 3가지의 주요 특징이 있습니다.

• 상대적인 이동: 요소는 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용하여 상대적인 위치 이동을 할 수 있습니다.
  
• 다른 요소에 영향 주지 않음: 요소의 이동은 다른 요소에 영향을 주지 않습니다. 다른 요소들과 겹칠 수 있습니다.
  
• 원래 위치를 기준으로 배치: 다른 position 값이 지정되지 않은 요소들은 relative로 간주됩니다. 이 속성이 지정된 요소는 자신의 원래 위치를 기준으로 배치됩니다.

<style>
.relative-box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: blue;
}

.inner-box {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

▶ 위의 예시는 .inner-box는 부모 요소인 .relative-box에 상대적인 위치에서 50px 아래, 50px 오른쪽으로 이동한 곳에 배치됩니다.
이렇게 position: relative;를 사용하면 요소를 상대적인 위치로 이동시켜 레이아웃을 유연하게 구성할 수 있습니다.

2. position: absolute;

▶ position: absolute;는 요소를 문서 흐름에서 제거하고, 해당 요소를 가장 가까운 position 값이 absolute, relative, fixed, sticky인 요소를 기준으로 배치하는 특징을 가지고 있으며 3가지의 주요 특징이 있습니다.

• 위치 제어: 요소를 원하는 위치에 자유롭게 배치할 수 있습니다. 이때 기준이 되는 조상 요소의 위치나 스크롤 여부에 영향을 받지 않습니다.
  
• 다른 요소와 겹침: 다른 요소와 겹칠 수 있으며, z-index 속성을 사용하여 겹친 요소의 순서를 조절할 수 있습니다.
  
• 스크롤에 영향 없음: 스크롤을 하더라도 요소의 위치가 고정되어 있습니다.

<style>
.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

▶ 위의 예시는 .absolute-box는 부모 요소인 .container의 상대적인 위치에서 50px 아래, 50px 오른쪽으로 이동한 곳에 배치됩니다.
이렇게 position: absolute;를 사용하면 요소를 자유롭게 배치하여 원하는 디자인을 구현할 수 있습니다.

3. position: fixed;

▶ position: fixed;는 요소를 브라우저 창을 기준으로 배치하며, 이때 요소는 스크롤되어도 항상 고정된 위치에 유지됩니다.
때문에 주로 페이지의 상단에 고정된 메뉴, 광고 배너, 혹은 스크롤해도 화면에 항상 보이는 요소들을 만들 때 사용되며, 3가지의 주요 특징이 있습니다.

• 고정된 위치: 요소가 스크롤되어도 화면에 항상 고정된 위치에 남습니다.
  
• 브라우저 뷰포트 기준: 뷰포트(브라우저 창)를 기준으로 배치되므로 스크롤에 영향을 받지 않습니다.
  
• 다른 요소와 겹침: 다른 요소와 겹칠 수 있으며, z-index 속성을 사용하여 겹친 요소의 순서를 조절할 수 있습니다.

<style>
.fixed-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    z-index: 1000; /* 다른 요소들 위에 표시하기 위해 z-index 사용 */
}
</style>

▶ 위의 예시처럼 position: fixed;를 사용하면 브라우저 상단 top: 0; left: 0;인 위치에 항상 고정되도록 설정됩니다.

4. position: inherit;

▶ position: inherit;은 부모 요소의 position 값과 동일하게 상속받는 속성입니다.
때문에 부모 요소의 position 값이 static, relative, fixed, absolute, sticky 중 하나일 경우, 해당 속성 값을 상속받아 자식 요소에 적용하게 되고,
만약 부모 요소에 position 값이 없는 경우에는 position: static; 속성을 상속받습니다.

<style>
.parent {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: lightblue;
}

.child {
    position: inherit; /* 부모 요소의 position 값을 상속받음 */
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

▶ 위의 예시에서 부모인 .parent는 position: relative;로 설정되어 있고, 자식인 .child는 position: inherit;로 설정되어 있습니다.
이 경우 .child는 부모 요소인 .parent의 position: relative; 값을 상속받아 상대적인 위치에 배치되는데 이렇게 하면 부모 요소의 position 값을 변경하더라도 자식 요소는 자동으로 적절한 위치에 배치됩니다.

5. position: initial;

▶ position: initial;은 요소의 position 속성을 기본값으로 초기화합니다.
기본값은 보통 static이며, 이는 요소를 문서 흐름에 따라 배치하는 것을 의미합니다.

<style>
.box {
    position: fixed;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}

.reset-box {
    position: initial; /* 요소의 position 값을 기본값으로 초기화 */
    background-color: blue;
}
</style>

▶ 위의 예시에서 .box는 position: fixed;로 설정되어 있어 브라우저 창 기준으로 고정된 위치에 있습니다.
반면에 .reset-box는 position: initial;로 설정되어 요소의 position 값을 기본값으로 초기화합니다.
이 때, 기본값이 static이므로 .reset-box는 문서 흐름에 따라 배치되며, 다른 요소와 겹치지 않고 자연스럽게 배치됩니다.

6. position: static;

▶ position: static;은 요소를 문서 흐름에 따라 배치하는 기본값입니다.
이 속성을 사용하면 요소는 다른 position 값이 지정되지 않은 경우와 동일하게 지정됩니다.
즉, 요소는 문서 흐름에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 배치되는 것입니다.

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
}

.static-box {
    position: static; /* 요소의 position 값을 기본값(static)으로 설정 */
    background-color: blue;
}
</style>

▶ 위의 예시에서 .box는 position: static;이 적용되지 않았으므로 문서 흐름에 따라 배치됩니다.
반면에 .static-box는 position: static;으로 설정되어 있어 요소의 position 값을 기본값인 static으로 초기화합니다.
이 경우 .static-box는 문서 흐름에 따라 일반적인 방식으로 배치되며, 다른 요소와 겹치지 않고 자연스럽게 배치됩니다.

7. position: sticky;

▶ position: sticky;는 요소를 일반적인 문서 흐름에 따라 배치하다가 특정 지점에 도달하면 고정시키는 기능을 제공합니다.
즉, 스크롤했을 때 해당 지점을 지나면 다시 문서 흐름에 따라 배치되도록 해주는 속성으로 이 속성을 사용하면 헤더, 사이드바 등을 스크롤을 내리더라도 항상 화면 상단이나 콘텐츠의 일부에 고정할 수 있습니다.

<style>
.header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
    z-index: 1000;
}
</style>

▶ 위의 예시에서 .header는 position: sticky;로 설정되어 있어 스크롤을 내릴 때 화면 상단에 고정됩니다.
여기서 top: 0;은 화면 상단에 고정시키는 위치를 지정하고, z-index를 사용하면 다른 요소들보다 위에 표시될 수 있도록 설정할 수 있습니다.
이렇게 하면 스크롤을 내려도 헤더는 항상 화면 상단에 고정되어 보여집니다.

8. position: unset;

▶ position: unset;은 요소의 position 속성을 부모 요소로부터 상속받거나, 부모 요소에 position 값이 없는 경우 initial과 같이 static으로 초기화하는 속성입니다.
즉, position: unset;을 사용하면 부모 요소에 position 값이 있을 땐 상속받고, 부모 요소에 position 값이 없을 때는 static으로 설정됩니다.

<style>
.parent {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: lightblue;
}

.child {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}

.unset-box {
    position: unset; /* 요소의 position 값을 부모 요소로부터 상속받음 또는 초기화 */
    background-color: green;
}
</style>

▶ 위의 예시에서 .child는 position: absolute;로 설정되어 있어 부모 요소인 .parent를 기준으로 상대적인 위치에 배치됩니다.
반면에 .unset-box는 position: unset;으로 설정되어 있어 요소의 position 값을 부모 요소로부터 상속받거나, 부모 요소에 position 값이 없을 때는 static으로 설정됩니다.
이 경우 .unset-box는 부모 요소 .parent의 position 값이 있으므로 이를 상속받아 상대적인 위치에 배치됩니다.

오늘은 css속성 중 position 종류에 대해 알아봤는데요,
다양한 옵션들을 활용하면 더 다양한 느낌의 웹사이트를 만들 수 있으니 조금씩 알아가보면 코드를 만들 때 도움이 되겠죠?
기회가 된다면 다음엔 다른 종류의 옵션을 소개하는 글을 들고 오도록 할게요😁!