frontend/CSS

[필기] 포지션 position │생활코딩

Mr.코딩 2023. 7. 27. 21:24

[css] 

position 속성에 대해 정리해 줘.

 

chatGTP

 

 CSS의 기본 디폴트(position의 초기값)는 static입니다. 따라서 HTML 문서에서 position 속성을 별도로 지정하지 않으면 요소는 static 포지션으로 배치됩니다. 

 

`position`은 CSS의 속성 중 하나로, 요소를 배치하는 방법을 지정하는 데 사용됩니다. HTML 요소들은 문서 상에서 일반적인 흐름(normal flow: 좌 → 우, 상 →하)에 따라 배치되지만, `position` 속성을 사용하면 요소를 다른 위치로 이동시키거나 겹치게 배치할 수 있습니다. `position` 속성에는 다음과 같은 값들이 있습니다:

 

1. `static`:

`position` 속성의 기본값이며, 요소를 일반적인 흐름에 따라 배치합니다. `top`, `right`, `bottom`, `left`, `z-index` 속성은 `static`인 요소에는 적용되지 않습니다.

 

2. `relative`:

요소를 자기 자신을 기준으로 이동시킬 수 있습니다. `top`, `right`, `bottom`, `left` 속성을 사용하여 요소를 상대적으로 이동시킬 수 있습니다. 다른 요소들과의 위치 관계가 변경되어도 일반적인 흐름을 유지합니다.

 

3. `absolute`:

요소를 가장 가까운 조상 요소 중 `position` 속성이 `relative`, `absolute`, `fixed`, 또는 `sticky`로 설정된 요소를 기준으로 이동시킵니다. 일반적인 흐름과 무관하게 위치를 지정할 수 있으며, 다른 요소들과의 위치 관계가 변경됩니다.

 

4. `fixed`:

요소를 뷰포트를 기준으로 이동시킵니다. 스크롤에 관계없이 항상 뷰포트에 고정되어 표시됩니다. 다른 요소들과의 위치 관계가 변경되지 않습니다.

 

5. `sticky`:

요소를 일반적인 흐름에 따라 배치하다가, 지정한 위치에 도달하면 `position: fixed;` 처럼 동작합니다. 스크롤 위치에 따라 고정되는 요소로 동작하지만, 지정한 위치를 지나면 다시 일반적인 흐름에 따라 배치됩니다.

 

`position` 속성을 사용하여 요소를 배치할 때, `top`, `right`, `bottom`, `left`, `z-index` 등과 함께 사용하여 원하는 위치와 겹치는 순서 등을 조정할 수 있습니다. 이를 통해 다양한 레이아웃을 구현할 수 있습니다. 다만, `position` 속성을 사용할 때에는 다른 요소들과의 위치 관계와 레이아웃에 주의하여야 하며, 반응형 웹 디자인을 고려해야 합니다.

 

 

https://youtu.be/eLF6IB1QMQE?list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62