CSS) position 속성

오늘은 css의 position 속성에 대해 알아보도록 하겠습니다.
CSS의 position 속성은 요소를 배치하는 방법을 지정하는 데 사용됩니다. 이 속성을 사용하여 요소를 페이지의 특정 위치에 배치하거나 요소가 문서 흐름에 영향을 미치는 방법을 제어할 수 있습니다. position 속성은 다음과 같은 값들을 가질 수 있습니다:
종류와 사용 예시에 대해 알아보도록 할게요!

position 종류

• static: 요소가 일반적인 문서 흐름에 따라 배치됩니다. 이는 position 속성의 기본 값입니다.
• relative: 요소가 자신의 원래 위치를 기준으로 이동됩니다. 다른 요소들에 영향을 주지 않고 이동하며, 원래 위치를 차지한 공간은 유지됩니다.
• absolute: 요소가 문서의 위치 상에서 가장 가까운 상위(조상) 요소를 기준으로 이동됩니다. 상위 요소 중 position 속성 값이 static이 아닌 것을 찾아 기준으로 삼습니다.
• fixed: 요소가 뷰포트를 기준으로 이동됩니다. 스크롤해도 화면에서 사라지지 않고 항상 같은 곳에 고정됩니다.
• sticky: 요소가 일반적인 문서 흐름에 따라 배치되다가 스크롤되는 컨테이너의 경계에 도달하면 지정된 위치에 고정됩니다.

01. static

• 요소가 일반적인 문서 흐름에 따라 배치됩니다.
• top, right, bottom, left, z-index 속성은 적용되지 않습니다.
• 기본값입니다.

.static-box {
    position: static;
}

• 기본적으로 문서 흐름에 따라 배치됩니다.

02. relative:

• 요소가 자신의 원래 위치를 기준으로 이동됩니다.
• 다른 요소들에 영향을 주지 않고 이동하며, 원래 위치를 차지한 공간은 유지됩니다.
• top, right, bottom, left, z-index 속성을 사용하여 상대적인 위치를 지정할 수 있습니다.

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
}

• 자신의 원래 위치를 기준으로 이동하며, top, left 속성에 의해 이동됩니다.

03. absolute:

• 요소가 문서의 위치 상에서 가장 가까운 상위(조상) 요소를 기준으로 이동됩니다.
• 상위 요소 중 position 속성 값이 static이 아닌 것을 찾아 기준으로 삼습니다.
• 부모 요소 중에 position: relative, position: absolute, position: fixed, position: sticky 중 하나를 갖는 것이 없다면, 가장 가까운 상위 요소인 body가 기준이 됩니다.
• top, right, bottom, left, z-index 속성을 사용하여 절대적인 위치를 지정할 수 있습니다.

.absolute-box {
    position: absolute;
    top: 50px;
    left: 100px;
}

• 가장 가까운 상위(조상) 요소를 기준으로 이동하며, top, left 속성에 의해 절대적인 위치를 지정합니다.

04. fixed:

• 요소가 뷰포트를 기준으로 이동됩니다.
• 스크롤해도 화면에서 사라지지 않고 항상 같은 곳에 고정됩니다.
• top, right, bottom, left, z-index 속성을 사용하여 위치를 지정할 수 있습니다.

.fixed-box {
    position: fixed;
    top: 0;
    right: 0;
}

• 뷰포트를 기준으로 이동되며, 화면에 항상 고정됩니다. top, right 속성을 사용하여 위치를 지정합니다.

05. sticky:

• 요소가 일반적인 문서 흐름에 따라 배치되다가 스크롤되는 컨테이너의 경계에 도달하면 지정된 위치에 고정됩니다.
• top, right, bottom, left, z-index 속성을 사용하여 고정될 위치를 지정할 수 있습니다.

.sticky-box {
    position: sticky;
    top: 10px;
}

• 스크롤되는 컨테이너의 경계에 도달하면 지정된 위치에 고정됩니다. 일반적으로 top 속성을 사용하여 고정될 위치를 지정합니다.

이러한 코드 예시를 참고하여 position 속성을 사용하여 요소를 배치하고 웹 페이지의 레이아웃을 제어할 수 있습니다.