minyoung

Position 심화 ver 기록🙌 - flexbox/grid 적용 여부 본문

CSS3

Position 심화 ver 기록🙌 - flexbox/grid 적용 여부

stylish-code 2025. 1. 17. 16:24

먼저, position 속성의 기본 개념은 아래와 같다. 

position 속성 : 요소의 위치를 제어하며, 문서 흐름과 부모 요소의 영향을 결정 

 

position 속성은 HTML 요소의 위치 지정 방법을 설정하는 CSS 속성이다.
이 속성을 사용해서 요소를 문서의 특정 위치에 배치하고 위치 관련 속성을 조절한다.

 

 

position: static;

 

. position: static;
- 기본 값으로, static으로 설정된 요소를 일반적인 문서의 흐름에 따라 배치 -> 즉, 위치가 지정되지 않고 요소는 화면의 상단에 차례대로 배정됨 
- 위치 지정이 없음 
- top, left, bottom, right 속성은 효과가 없음
- 다른 위치 지정 속성을 사용하지 않을 때 적용되는 값 

 

position: relative;

 

2. position: relative;
- 상대적인 위치
- relative로 설정된 요소는 기존 문서 흐름에 따라 위치를 잡고, 거기에서 지정한 top, left, bottom, right 속성으로 상대적으로 이동함
- 예를 들어, top: 10px;이 설정되면 요소는 원래 자리에서 위로 10px만큼 이동

 

position: absolute;

 

3. position: absolute;
- 절대적인 위치
- absolute로 설정된 요소는 가장 가까운 부모 요소(position이 relative, absolute, fixed로 설정된 요소)를 기준으로 절대적으로 배치됨
- 위의 부모 요소가 없으면 최상위 요소인 <html>을 기준으로 위치가 지정됨
- 이 요소는 문서 흐름에서 제거되어 다른 요소들과 겹칠 수 있음
- top, left, bottom, right 를 이용하여 정확한 위치를 지정함 

 

position: fixed;

 

4. position: fixed;
- 고정된 위치
- fixed로 설정된 요소는 뷰포트를 기준으로 배치되며, 스크롤을 내리거나 올려도 화면에서 고정된 위치에 계속 표시됨 -> 뷰포트(브라우저 창)를 기준으로 배치, 스크롤이 되더라도 고정되어서 움직이지 않음
- 문서 흐름에서 제거되며, 항상 지정된 위치에 고정됨
- top, left, bottom, right 로 정확한 고정 위치를 설정할 수 있음
✅ static : 기본값으로 문서 흐름에 맞춰 배치됨, 위치 설정 효과 없음
✅ relative : 자신의 원래 위치를 기준으로 상대적으로 이동 
✅ absolute : 가장 가까운 부모 요소를 기준으로 절대적인 위치로 이동
✅ fixed : 뷰포트를 기준으로 고정된 위치에 배치 
🙌 따라서, relative는 상대적 위치이고, absolute, fixed는 절대적 위치이다. 

 

CSS position 속성과 Flexbox/Grid 정리

1. position 속성의 정의

- 요소의 위치를 제어하며, 문서 흐름과 부모 요소의 영향을 결정

- 유형 : static, relative, absolute, fixed => 위 설명 참고 

 

2. position 속성별 문서 흐름과의 관계 & flexbox/grid 적용 가능 여부 

속성 문서 흐름 유지 여부 위치 지정(top, left,  bottom, right) 특징
static 유지 불가능 기본값이며 위치 지정 없음.

flexbox/grid 모두 적용 가능.
relative 유지 가능 상대적 위치, 본인 기준으로 top / left / bottom / right 사용해 이동.

flexbox/grid 모두 적용 가능.
absolute 문서 흐름에서 제거됨 가능 절대적 위치, 가장 가까운 부모(absolute, relative, fixed -> 없으면 html) 기준으로 top / left / bottom / right 사용해 이동.

flexbox/grid 모두 적용 불가.
fixed 문서 흐름에서 제거됨 가능 고정 위치, 뷰포트 기준으로 top / left / bottom / right 사용해 이동.

flexbox/grid 모두 적용 불가.

 

'CSS3' 카테고리의 다른 글

margin-left: auto;와 margin-left: auto;  (0) 2023.12.07
inline에도 margin과 padding이 적용될까?  (0) 2023.12.05
flexbox froggy 정답 해설 기록✔️(21~24) - 마지막 😀 총 24단계  (0) 2023.12.01
flexbox froggy 정답 해설 기록✔️(16~20) - 5단계씩 정리 😀 총 24단계  (0) 2023.12.01
flexbox froggy 정답 해설 기록✔️(11~15) - 5단계씩 정리 😀 총 24단계  (0) 2023.12.01
'CSS3' Related Articles more