position
CSS position 속성은 문서 상에 요소를 배치를 결정하는 CSS다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
position 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있다.
- static
일단 모든 태그들은 처음에 position: static 상태다. (기본적으로 static이라 따로 써주지 않아도 된다.)
차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다.
- relative
여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용한다.
static과의 차이점은 element가 자신의 static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인(relative) 위치에 배치된다는 점이다.
position을 relative로 사용해도 top, right, bottom, left와 같은 속성을 주지 않았을 때 position을 staitc으로 지정했을 때와 같은 위치에 배치됩니다.
relative로 지정한 element는 다른 요소들의 위치에 영향을 주지 않는다.
출처: https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
-
#top 태그에 top: 5px를 줬는데 왜 아래로 이동했을까?
relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동한다. 바깥쪽으로 이동하게 하고 싶으면 5px 대신 음수 -5px를 주면 된다. -
#top이 #left보다 위에 있다?
보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치된다.
하지만z-index라는 속성을 #top 태그에 더 높게 주었기 때문에 #left태그보다 위로 올라갔다. -
z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성이다(기본값은 0). #top에 1을 주었기 때문에 다른 태그들보다 높게 위치한다.
- absolute
position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다.
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 조상을 기준으로 움직인다.
만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 최상위에 있는 <body> 요소가 배치 기준이 된다.
따라서 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정해주는 것이 관례다.
출처: https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
위의 예시에서 #absolute는 조상 태그 중 postion: relative인 것이 없기 때문에 body를 기준으로 가장 오른쪽으로 달라붙었다.
반면 #child는 조상 태그인 #parent가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽으로 달라붙었다.
참고로 absolute가 되면 div여도 더는 width: 100%가 아니다.
- fixed
화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI가 fixed에 해당된다.
보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법이다.
position 속성을 fixed로 지정하면 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.
fixed는 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이다.
top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다.
- fixed도 absolute처럼 더는 div가 width: 100%가 아니다.
- position: absolute인 요소와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않는다.
- sticky
브라우저 화면을 스크롤링할 때 효과가 나타난다.
출처: https://www.daleseo.com/css-position/
fixed와 sticky의 차이점
position: fixed와 position: sticky는 둘 다 요소의 위치를 고정시킬 때 사용하는 CSS position 속성의 값이다. 그러나 이 두 속성 사이에 중요한 차이가 있다.
1. 고정 위치의 동작 방식
-
fixed: 요소를 뷰포트(Viewport)를 기준으로 고정시킨다. 즉, 스크롤해도 요소는 화면의 동일한 위치에 남는다. 다른 요소와 겹칠 수 있다. -
sticky: 요소를 일반 문서 흐름에 따라 배치하다가 지정한 위치(일반적으로 스크롤되면 화면 상단)에 도달하면 고정시킨다. 스크롤 위치에 따라 요소가 고정 및 해제된다.
2. 상대적인 위치 지정
-
fixed: 위치가 뷰포트를 기준으로 고정되므로, 스크롤해도 항상 뷰포트 내에서 고정 위치를 유지한다. -
sticky: 부모 요소 내에서 고정 위치를 지정하며, 부모 요소의 크기와 스크롤 위치에 따라 동작한다. 따라서 부모 요소 내에서 고정 위치를 설정하려면 부모 요소도 적절한 CSS(ex. 높이(height), overflow(auto, scroll. sticky요소에는 고정위치 지정.)를 가져야 합니다.
3. 활용 사례
-
fixed: 헤더, 사이드바 또는 광고와 같이 항상 화면 상단에 또는 특정 위치에 고정된 요소를 만드는 데 유용하다. -
sticky: 페이지 내에서 특정 지점까지 스크롤하면 메뉴를 화면 상단에 고정시키거나, 표의 헤더를 스크롤하면 표의 헤더를 고정시키는 등의 유용한 스크롤 효과를 만드는 데 사용된다.
간단히 말하면, position: fixed는 항상 고정 위치에 있고, position: sticky는 특정 위치에 고정되며 스크롤에 따라 동작하는 데 사용된다.
예상 질문 (written by gpt...)
- position 속성의 다양한 값과 그 의미에 대해 더 자세히 설명해보세요.
정적(static), 상대적(relative), 절대적(absolute), 고정된(fixed), 스티키(sticky) 등의 다양한 position 값과 각각의 동작 방식에 대해 설명할 수 있어야 합니다.
- position 속성을 사용하는 가장 흔한 사용 사례는 무엇인가요?
예를 들어, 레이아웃을 조정하거나 요소를 정확한 위치에 배치하기 위해 어떤 경우에 position 속성을 사용하는지 설명할 수 있어야 합니다.
- position 속성을 사용할 때 주의해야 할 사항은 무엇인가요?
position을 사용할 때 발생할 수 있는 레이아웃 이슈나 성능 문제에 대해 언급하고, 이를 해결하는 방법에 대해 알고 있는지 물어볼 수 있습니다.
- position을 사용하여 요소를 수평/수직 가운데 정렬하는 방법에 대해 설명해주세요.
요소를 가운데 정렬하려면 어떤 position 속성 값과 CSS 속성을 사용해야 하는지 설명할 수 있어야 합니다.
- position 속성과 함께 z-index 속성은 어떻게 동작하나요?
요소가 겹칠 때 z-index 속성을 사용하여 요소의 쌓임 순서를 조절하는 방법과 그 동작 원리에 대해 설명할 수 있어야 합니다.
- position: sticky를 사용한 스티키 요소의 작동 방식을 설명하세요.
position: sticky를 사용하여 요소를 스크롤에 따라 화면 상단에 고정하는 방법과 조건에 대해 설명할 수 있어야 합니다.
참고
