포지션(position)
top, left, bottom, right 속성과 함께 사용됩니다.
CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다.
1. 정적 위치(static position) 지정 방식
2. 상대 위치(relative position) 지정 방식
3. 고정 위치(fixed position) 지정 방식
4. 절대 위치(absolute position) 지정 방식
5. sticky position 지정 방식
정적 위치(static position) 지정 방식
HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다.
position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다.
정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다.
모든 HTML 요소의 position 속성의 기본 설정값은 static입니다.
상대 위치(relative position) 지정 방식
상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식입니다.
HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지정 방식일 때 결정되는 위치를 의미합니다.
position 속성값이 relative로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받습니다.
즉, 부모에 대해서 상대적으로 움직인다.
<style>
div.static {
position: static;
border: 2px solid #b8860b;
}
div.relative {
position: relative;
border: 2px solid #cd5c5c;
left: 30px;
}
</style>
<body>
<h1>상대 위치(relative position) 지정 방식</h1>
<div class="static">
이 요소는 정적 위치 지정 방식으로 위치를 설정하였습니다.
</div>
<br />
<div class="relative">
이 요소는 상대 위치 지정 방식으로 위치를 설정한 후, left 속성값을 30px로
설정하였습니다.
</div>
<br />
<p>
상대 위치는 해당 HTML 요소의 정적 위치(static position)에 따라 위치를
재조정하는 방식입니다!
</p>
</body>
고정 위치(fixed position) 지정 방식
고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식입니다.
즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.
<style>
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 20px;
border: 3px solid green;
font-size: 25px;
color: green;
}
</style>
<body>
<h2>position: fixed;</h2>
<button class="fixed">↑</button>
<script></script>
</body>
절대 위치(absolute position) 지정 방식
절대 위치(absolute position) 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작합니다.
단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 됩니다. 하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됩니다. 위치가 설정된 요소라는 것은 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미합니다.
sticky position 지정 방식
sticky가 적용된 요소는 마우스 스크롤시 정의된 위치에 고정해 줍니다.
<style>
.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: greenyellow;
border: 2px solid green;
}
</style>
<body>
<h2>
position:sticky가 적용된 요소는 마우스 스크롤시 정의된 위치에 고정해 줍니다.
</h2>
<div class="sticky">position:sticky 영역</div>
<div style="padding-bottom: 2000px"></div>
</body>
정적 위치(static position) 지정 방식과 다른 방식들과의 차이점
정적 위치(static position) 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식입니다.
- 상대 위치(relative position) : 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치함.
- 고정 위치(fixed position) : 뷰포트(viewport)에 상대적으로 위치함.
- 절대 위치(absolute position) : 위치가 설정된 바로 상위의 조상(ancestor) 요소에 상대적으로 위치함.
참고자료
https://developer.mozilla.org/en-US/docs/Web/CSS/position
http://www.tcpschool.com/css/css_position_position
https://www.w3schools.com/charsets/ref_utf_arrows.asp
참고 동영상
★ https://www.youtube.com/watch?v=0kA0mBvumrg
-> 정말 좋은 예제로 설명해줌
'WEB > CSS' 카테고리의 다른 글
| [CSS] 미디어 쿼리(media query) (0) | 2022.05.03 |
|---|---|
| [CSS] 디스플레이(display) (0) | 2022.05.02 |
| [CSS] 오버플로우(overflow) (0) | 2022.04.30 |
| [CSS] 배경(background) (0) | 2022.04.29 |
| [CSS] 박스모델(box-model) (0) | 2022.04.28 |
댓글