1. 요소의 위치 정하기
| position | 문서 상에 요소를 배치하는 방법을 정의 |
| top | 요소를 위에서부터 얼마만큼 떨어뜨리겠다 |
| right | 요소를 오른쪽에서부터 얼마만큼 떨어뜨리겠다 |
| bottom | 요소를 아래에서부터 얼마만큼 떨어뜨리겠다 |
| left | 요소를 왼쪽에서부터 얼마만큼 떨어뜨리겠다 |
2. position 속성의 속성값
(1) static
-요소를 일반적인 문서 흐름에 따라 배치 (default)
(2) relative
-일반적인 문서 흐름에 따라 배치
-원래 자리에 오프셋을 적용
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative; /* relative */
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div></div>
<p>안녕하세요 position입니다</p>
</body>
</html>
(3) absolute
-일반적인 문서 흐름에서 제거
-상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#a {
position: absolute; /* absolute */
top: 100px; /* offset */
width: 100px;
height: 100px;
background-color: cyan;
border: none;
}
</style>
</head>
<body>
<div></div>
<div>
<div id="a"></div>
<p>안녕하세요 position입니다</p>
</div>
</body>
</html>| cyan 박스에 postion과 offset을 지정하지 않은 경우 |
cyan 박스에 absolute와 offset을 지정한 경우 |
div(cyan 박스의 상위 요소)의 position을 지정하지 않은 채, cyan 박스에 absolute를 지정한 경우 |
 |
 박스가 일반적인 문서 흐름에서 제외됨 => p태그가 박스를 무시하고 위로 올라옴 |
 상위 요소 중 가장 가까운 postion을 지정한 요소가 없으므로 위와 같이 나타나게 됨 |
(4) fixed
-일반적인 문서 흐름에서 제거
-지정한 위치에 고정 => 스크롤을 내려도 그 위치에 그대로 고정되어 남아있음
| 아무것도 지정하지 않은 경우 | cyan 박스에 fixed와 offset을 지정한 경우 | |
 |
 |
 |
(5) sticky
-일반적인 문서 흐름에 따라 배치
-스크롤 동작이 있는 가장 가까운 요소에 대해 오프셋을 적용
=> 평소에는 원래 자리에 있다가, 스크롤해서 요소가 움직이면 지정한 위치에 달라붙음
| cyan 박스에 sticky, left: 100px, top: 10px을 지정한 경우 | ||
 |
 |
 |
'Frontend > HTML, CSS' 카테고리의 다른 글
| z-index가 없는 경우의 쌓임을 이해하고, 실제 문제에 적용하여 해결하기 (0) | 2024.03.25 |
|---|---|
| CSS input text type 클릭 시 테두리 제거 & 깜빡임 색상 변경 (0) | 2023.01.08 |
| CSS basic flex (0) | 2022.12.01 |
| CSS basic 박스 모델 (0) | 2022.11.13 |