1. position
위치, 자리
2. CSS position이란?
css에서 포지션이란 HTML 요소의 위치를 결정하는 데 사용되는 속성이다. 포지션은 요소가 문서 내에서 어떻게 배치될지 정의한다.
2.1. position 속성의 주요 값
- static (기본값):
- 요소가 일반적인 문서 흐름에 따라 배치됩니다.
- top, right, bottom, left 속성이 적용되지 않습니다.
- 특별한 위치 조절이 필요 없는 경우에 사용됩니다.
- relative:
- 요소가 원래 위치를 기준으로 상대적으로 이동합니다.
- top, right, bottom, left 속성을 사용하여 이동 거리를 지정할 수 있습니다.
- 다른 요소와의 상대적인 위치 조절에 유용합니다.
- absolute:
- 요소가 가장 가까운 위치가 지정된(positioned) 조상 요소를 기준으로 절대적으로 배치됩니다.
- 만약 위치가 지정된 조상 요소가 없다면, 초기 컨테이너(보통 <html> 또는 <body>)를 기준으로 배치됩니다.
- top, right, bottom, left 속성을 사용하여 정확한 위치를 지정할 수 있습니다.
- 다른 요소와의 관계없이 독립적인 위치에 배치할 때 유용합니다.
- fixed:
- 요소가 브라우저 창을 기준으로 고정된 위치에 배치됩니다.
- 스크롤을 해도 요소가 항상 같은 위치에 유지됩니다.
- top, right, bottom, left 속성을 사용하여 위치를 지정합니다.
- 네비게이션 바, 광고 배너 등 고정된 요소에 사용됩니다.
- sticky:
- 요소가 일반적인 문서 흐름에 따라 배치되다가, 스크롤 위치에 따라 고정된 위치에 배치됩니다.
- top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정합니다.
- 특정 스크롤 영역에서만 고정되는 요소에 유용합니다.
2.2. 1. static, relative, absolute
html
<div class="container">
<div class="box static-box">static-box</div>
<div class="box relative-box">relative-box</div>
<div class="box absolute-box">absolute-box</div>
</div>클릭하여 코드 복사css
.container{width: 200px;
margin: 50px;
height: 300px;
border: 2px black solid;
}
.box{border: 1px black solid;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 25px;
padding: 10px}
.static-box {
background-color: rgb(0, 132, 255);
}
.relative-box {
background-color: rgb(43, 202, 255);
}
.absolute-box {
background-color: rgb(255, 125, 125);
}클릭하여 코드 복사
기본적으로 HTML에서 요소를 배치하면 아래와 같이 순서대로 배치된다. 즉 기본값인 static을 속성으로 해서 요소가 배치되는 것이다.
하지만 각 요소에 position 속성을 적용하면 해당 포지션에 따라서 위치가 달라진다.
.container{width: 200px;
margin: 50px;
height: 300px;
border: 2px black solid;
position: relative;
}
.box{border: 1px black solid;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 25px;
padding: 10px}
.static-box {
background-color: rgb(0, 132, 255);
position: static; /** static 추가 **/
}
.relative-box {
background-color: rgb(43, 202, 255);
position: relative; /** relative 추가 **/
left: 50px;
top:40px;
}
.absolute-box {
background-color: rgb(255, 125, 125);
position: absolute; /** absolute 추가 **/
left: 300px;
}클릭하여 코드 복사
static 같은 경우엔 별도로 속성 변화가 없기 때문에 기존과 동일한 자리에 위치하고 있다.
relative 같은 경우엔 원래 자기 자리를 기준으로 이동하기 때문에 원래 자기자리에서 left : 50px top:40px 만큼 이동했다.
absolute 같은 경우엔 부모 요소인 container를 기준으로 left : 300px 만큼의 위치로 이동했다.
만약 top을 별도로 지정하지 않는다면 내부에 있는 요소들의 순서를 top으로 가진다.
이동 중에 줄이 바뀌었는데 left를 50정도로 하면 내용이 박스의 크기를 넘어선 것이 아니기 때문에 박스 내부에 남아있기 위해서 줄 바꿈으로 너비를 줄이기 때문이다.
witdth를 설정했다면 너비가 바뀌지 않는다.
만약에 부모 요소에 relative 속성이 없다면 absolute는 브라우저 자체, 즉 body를 기준으로 위치를 설정하게 된다.
그럴 경우 이처럼 다른 요소에 영향을 받지 않고 설정된 속성에 따라 위치가 이동된다.
2.3. 2. fixed
요소를 브라우저 창(뷰포트)을 기준으로 고정된 위치에 배치하는 데 사용된다. 스크롤을 하더라도 요소는 항상 같은 위치에 유지된다.
html
<body>
<div class="container">
<div class="box static-box">static-box</div>
<div class="box relative-box">relative-box</div>
<div class="box absolute-box">absolute-box</div>
<div class="box fixed-nav">fixed-nav</div>
</div>
</body>클릭하여 코드 복사css
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: lightgreen;
padding: 10px;
}클릭하여 코드 복사때문에 스크롤을 내려도 위치가 이동되지 않는다. 스크롤을 따라다니는 탐색기(navigation, 네비게이션) 등에서 활용된다.
물론 탐색기에만 사용되는 것은 아니고 계속 유지되는 제목 혹은 화면의 가장 아래쪽에 있는 메뉴 등에도 사용된다.
만약에 브라우저 아래쪽에 위치해서 푸터(footer)로 사용하고 싶다면 bottom을 0으로 주면 된다.
2.4. 3. sticky
요소가 일반적인 문서 흐름에 따라 배치되다가, 스크롤 위치에 따라 고정된 위치에 배치된다.
top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정한다.
html
<body>
<div>
<div class="box1">이곳에는 다양한 문서가 존재한다.</div>
<div class="sticky-header">고정 제목</div>
<div style=>
<div class="box2">이곳부터 sticky가 적용된다.</div>
콘텐츠 내용...
</div>
</div>
</body>클릭하여 코드 복사css
.box1{
background-color: gray;
height: 1000px;
}
.box2{
background-color: beige;
height: 1000px;
}
.sticky-header {
position: sticky;
top: 0;
background-color: lightgray;
padding: 10px;
}클릭하여 코드 복사이렇게 스크롤을 내리다보면 지정된 위치에서 계속 고정되어 움직이지 않는 것을 확인할 수 있다.
이렇게 특정 요소 사이에 고정된 제목을 넣을 수 있기 때문에
긴 콘텐츠를 여러 섹션으로 나눌 때 각 섹션의 제목을 스크롤에 따라 상단에 고정하여 사용자가 현재 어떤 섹션을 보고 있는지 쉽게 파악할 수 있도록 할 수 있다.
혹은 사이드바를 고정해서 사용자가 언제든 사이드바를 사용할 수 있게 할 수있다.
'CSS > css 심화' 카테고리의 다른 글
| CSS 심화 공부(18) - 박스 사이징(box-sizing) (0) | 2025.03.16 |
|---|---|
| CSS 심화 공부(16) - z-index (0) | 2025.03.14 |
| CSS 심화 공부(14) - grid(3) : row-start, end / column-start, end (0) | 2025.03.14 |
| CSS 심화 공부(13) - grid(2) : gap, template-rows / columns (0) | 2025.03.13 |
| CSS 심화 공부(12) - grid(1) (0) | 2025.03.13 |