CSS position 정리

CSS의 속성들의 정보 정리 두번째.

CSS의 속성 목록

• transform
  
• position
  
• display: inline-block
  
• transition
  
• z-index
  
• height: inherit
  

position

CSS의 __position__ 속성은 요소의 위치를 어떻게 결정할지를 지정합니다. 이 속성은 요소를 문서의 흐름에서 제거하거나, 다른 요소 위에 겹치게 하거나, 브라우저 창에 고정시키는 등의 방법으로 요소의 위치를 조절할 수 있게 해줍니다. position 속성에는 주로 다음과 같은 값들이 사용됩니다: static, relative, absolute, fixed, sticky 각각의 값은 요소의 위치를 다르게 결정합니다.

웹 페이지를 작성할 때 기본적으로 많이 사용되는 위치 지정 방식이며, 대부분의 요소는 이를 기반으로 문서 내에서 자연스럽게 배치됩니다. 다른 위치 지정 방식과 비교했을 때, 특별한 위치 조정 없이 문서 흐름에 따라 요소를 배치하고자 할 때 주로 사용됩니다.

static

position: static;

static은 CSS에서 position 속성의 static 값은 기본적으로 모든 HTML 요소에 할당된 기본 위치 지정 방식입니다. 요소가 특별히 위치를 지정하지 않았을 때, 즉 다른 position 값 (relative, absolute, fixed, sticky) 으로 명시적으로 설정되지 않은 경우에 해당하며 static 위치 지정 방식의 주요 특징은 다음과 같습니다

문서 흐름에 따름

• static 으로 설정된 요소는 일반 문서 흐름에 따라 위치합니다. 이는 요소가 페이지 상에서 자신의 자연 위치를 차지한다는 것을 의미합니다. 즉, HTML에 선언된 순서대로 상하로 배치됩니다.
  

오프셋 속성 무시

• top, right, bottom, left 와 같은 오프셋 속성이 static 으로 설정된 요소에는 적용되지 않습니다. 이 속성들은 요소의 위치를 조정하는 데 사용되지만, static 요소는 이러한 속성의 영향을 받지 않습니다.
  

상대적 배치 불가능

• static 위치 지정 방식은 요소를 상대적으로 배치하거나, 다른 요소 위에 겹쳐서 배치하는 것을 허용하지 않습니다. 이러한 유형의 복잡한 배치를 원한다면, relative, absolute, fixed, 또는 sticky 와 같은 다른 position 값을 사용해야 합니다.
  

레이아웃에 대한 기본 선택

• 대부분의 요소는 특별한 위치 지정이 필요하지 않은 경우 static 상태로 두는 것이 일반적입니다. 복잡한 레이아웃이나 특정 요소를 다른 요소에 상대적으로 위치시키고 싶은 경우가 아니라면, 기본값인 static 을 사용하는 것이 좋습니다.
  

---

relative

.div-relative {
  position: relative;
  top: 20px; /* 원래 위치에서 위로 20픽셀 이동 */
  left: 10px; /* 원래 위치에서 왼쪽으로 10픽셀 이동 */
  z-index: 1; /* 겹치는 요소 중에서 상위에 배치 */
}

relative는 CSS에서 요소의 위치를 지정하는 방법 중 하나입니다. 이 속성 값을 사용하면 요소를 원래 위치에서 상대적으로 이동시킬 수 있으며, 요소가 차지하는 공간은 원래 위치에 그대로 유지됩니다. relative 값은 요소를 정상적인 문서 흐름에서 벗어나게 하지 않으면서도, 특정 방향으로 위치를 조정할 수 있게 해줍니다.

주요 특징

문서 흐름 유지

• relative 로 설정된 요소는 문서 흐름에서 벗어나지 않습니다. 즉, 요소의 원래 위치가 다른 요소의 배치에 영향을 계속 미칩니다.
  

상대적 이동

• top, right, bottom, left 속성을 사용하여 원래 위치에서 상대적으로 요소를 이동시킬 수 있습니다. 예를 들어 위의 코드를 적용한다면 top: 10px은 요소를 위로 10픽셀 이동시키고, left: 20px은 요소를 왼쪽으로 20픽셀 이동 시킵니다.
  

기준점 역할

• position: relative 로 설정된 요소는 자식 요소가 position: absolute 로 설정될 경우, 그 자식 요소의 기준점(containing block) 이 됩니다. 이는 절대 위치 지정된 자식 요소가 상위 요소를 기준으로 위치가 결정 되게 합니다.
  

z-index 사용 가능

• relative로 설정된 요소는 z-index 속성을 사용하여 다른 요소와의 겹침 순서를 조정 할 수 있습니다. 이를 통해 요소의 시각적 배치를 더 세밀하게 제어할 수 있습니다.
  

---

absolute

.relative-parent {
  position: relative;
  width: 400px;
  height: 200px;
}

.absolute-child {
  position: absolute;
  top: 20px;
  right: 10px;
}

<div class="relative-parent">
  <div class="absolute-child">저는 조상 요소에 상대적으로 위치합니다!</div>
</div>

absolute는 CSS에서 매우 강력한 위치 지정 방식 중 하나입니다. 이 방식을 사용하면 요소가 일반 문서 흐름에서 제거되고, 가장 가까운 위치 지정된 (positioned) 조상 요소에 대해 상대적으로 배치됩니다. 위치 지정된 조상이 없는 경우에는 html 요소에 대해 상대적으로 위치가 지정됩니만 위의 예시에서 .absolute-child는 .relative-parent에 상대적으로 위치하며, .relative-parent는 위치 지정된 조상 요소 역할 을 합니다. 따라서 .absolute-child는 상단으로부터 20px, 오른쪽으로부터 10px 떨어진 곳에 위치하게 됩니다.

주요 특징

문서 흐름에서 제거

• absolute로 지정된 요소는 문서 흐름에서 제거되어, 다른 요소들이 해당 요소의 공간을 차지하지 않게 됩니다.
  

가까운 위치 지정된 조상 요소를 기준으로 설정

• 가장 가까운 위치 지정된 (즉, static이 아닌 position 속성을 가진) 조상 요소에 대해 상대적으로 위치가 결정됩니다. 조상 요소가 없는 경우 html 요소가 기준이 됩니다.
  

top, right, bottom, left 속성 사용

• 이 요소들을 사용하여 조상 요소에 대한 상대적 위치를 조절할 수 있습니다. 예를 들어, top: 20px; left: 30px;라고 지정하면, 요소는 조상 요소의 위쪽 모서리로부터 위로 20px, 왼쪽으로 30px 떨어진 위치에 배치 됩니다.
  

z-index 속성과의 상호작용

• absolute로 지정된 요소는 z-index 속성을 사용하여 다른 요소들과의 쌓임 순서를 조절 할 수 있습니다.
  

사용 사례

• 드롭다운 메뉴, 모달, 툴팁 등의 UI 요소를 페이지의 다른 요소들 위에 겹쳐서 표시할 때 사용됩니다.
  
• 복잡한 레이아웃을 구성할 때 특정 요소를 문서 흐름에서 독립시켜 위치를 정확하게 조절할 필요가 있을 때 활용됩니다.
  

---

fixed

.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

fixed 속성은 웹 페이지의 레이아웃에서 특정 요소를 고정 시키는 데 사용됩니다. 이 속성이 적용된 요소는 스크롤할 때도 항상 지정된 위치에 고정되어 있어, 사용자가 페이지를 어떻게 스크롤하든 해당 요소는 화면에 계속 보이게 됩니다. fixed는 주로 네비게이션 바, 광고, 버튼 등 중요한 요소를 항상 사용자에게 보이게 하고 싶을 때 사용됩니다.

주요 특징

문서 흐름에서 제거

• fixed로 지정된 요소는 문서의 일반적인 흐름에서 제거되어, 다른 요소들은 그 위치를 차지하지 않게 됩니다.
  

뷰포트에 대해 고정

• 고정된 요소는 가장 가까운 블록 레벨 조상 대신 뷰포트에 대해 위치가 지정됩니다. 즉, 창 크기를 조정하거나 스크롤해도 요소의 위치는 변하지 않습니다.
  

top, right, bottom, left 속성 사용

• 이 속성들을 사용하여 뷰포트 내에서 요소의 정확한 위치를 지정 할 수 있습니다. 예를 들어, bottom: 0;과 right: 0;을 설정하면 요소가 화면의 오른쪽 하단에 고정됩니다.
  

z-index와의 상호작용

• fixed 요소는 z-index 속성을 사용하여 다른 요소들 사이의 쌓임 순서를 조정 할 수 있습니다.
  

---

sticky

.sticky-element {
  position: -webkit-sticky; /* Safari를 위한 접두어 */
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

sticky 속성은 특정 요소를 “sticky”하게 만들어, 사용자가 페이지를 스크롤할 때 일정 범위 내에서는 마치 position: relative;처럼 동작하고, 설정된 임계점에 도달하면 position: fixed;의 특성을 가지며 화면에 고정되게 합니다. 이를 통해 사용자 인터페이스의 특정 부분을 눈에 띄게 유지할 수 있으며, 주로 헤더, 네비게이션 바 또는 사이드바에 사용됩니다. 위의 예제에서는 .sticky-element 클래스를 가진 요소가 페이지 상단에 도달하면 화면 상단에 고정됩니다. 사용자가 스크롤을 계속 내리면, 이 요소는 다른 내용 위로 고정되어 보이게 됩니다.

position: sticky는 매우 유용하지만, 모든 브라우저에서 완벽하게 지원되지 않을 수 있으므로 사용하기 전에 브라우저 호환성을 확인해야 합니다. 또한, 상위 요소에 오버플로우가 숨겨져 있거나, 스티키 요소가 스크롤 가능한 조상 요소 내에 없는 경우에는 동작하지 않을 수 있습니다.

주요 특징

문서 흐름 유지

• fsticky를 적용한 요소는 문서 흐름을 유지합니다. 즉, 다른 요소들이 그 위치를 차지하고 있게 됩니다.
  

임계점 도달 시 고정

• 스크롤 위치가 요소의 top, bottom, left, right 속성에서 지정한 임계점에 도달하면, 요소가 화면에 고정 됩니다.
  

상대적 고정 위치

• 고정되는 위치는 가장 가까운 스크롤 가능한 조상 요소나 뷰포트에 대해 상대적입니다.
  

top, bottom, left, right 속성 사용

• 이 속성들을 사용하여 고정될 때의 위치를 정의할 수 있습니다. 예를 들어, top: 0;은 요소가 뷰포트 상단에 도달했을 때 고정되게 합니다.