반응형
position 속성
HTML 요소의 위치 설정을 지정하는 스타일 속성
| 속성값 | 설명 |
| static(기본값) | 요소를 문서의 일반적인 흐름에 따라 배치하도록 설정 |
| relative | 요소를 문서의 일반적인 흐름에 따라 배치하고, 요소의 영역을 기준으로 top, right, bottom, lefe 스타일 속성의 값에 따라 오프셋을 적용하도록 설정 |
| absolute | 요소를 문서의 일반적인 흐름에서 제거하고, 조상 요소 중에 가장 가까운 위치 지정 요소를 기준으로 배치하도록 설정 (조상 요소 중 위치 지정 요소가 없는 경우, 초기 컨테이닝 블록을 기준으로 배치) |
| fixed | 요소를 문서의 일반적인 흐름에서 제거하고, 브라우저 화면을 기준으로 배치하도록 설정 |
HTML 요소의 배치방법
1. HTML 요소의 배치 : 기본적인 HTML 요소는 HTML 문서의 일반적인 흐름에 따라서 순서대로 배치
2. 상대적인 위치 : 요소가 문서의 일반적인 흐름에 따라 배치됐을 때의 영역을 기준으로 상대적인 위치에 배치
3. 절대적인 위치 : 요소를 문서의 일반적인 흐름에서 제거하고, 특정 영역을 기준으로 배치
위치 지정 요소와 절대 위치 지정 요소
1. 위치 지정 요소 : position 스타일 속성의 값이 relative, absolute, fixed 중 하나인 요소
(즉, position 스타일 속성의 값이 static이 아닌 요소)
2. 절대 위치 지정 요소 : position 스타일 속성의 값이 absolute, fixed 중 하나인 요소
(이 요소는 문서의 일반적인 흐름에서 제거되므로, 부모 요소의 컨텐츠로 인식되지 않는다)
컨테이닝 블록 : 요소의 크기나 위치는 컨테이닝 블록에 영향을 받으며, position 스타일 속성의 값에 따라 요소의 컨테이닝 블록이 달라진다.
1. HTML 요소의 배치 : 기본적인 HTML 요소는 HTML 문서의 일반적인 흐름에 따라서 순서대로 배치
2. 상대적인 위치 : 요소가 문서의 일반적인 흐름에 따라 배치됐을 때의 영역을 기준으로 상대적인 위치에 배치
3. 절대적인 위치 : 요소를 문서의 일반적인 흐름에서 제거하고, 특정 영역을 기준으로 배치
위치 지정 요소와 절대 위치 지정 요소
1. 위치 지정 요소 : position 스타일 속성의 값이 relative, absolute, fixed 중 하나인 요소
(즉, position 스타일 속성의 값이 static이 아닌 요소)
2. 절대 위치 지정 요소 : position 스타일 속성의 값이 absolute, fixed 중 하나인 요소
(이 요소는 문서의 일반적인 흐름에서 제거되므로, 부모 요소의 컨텐츠로 인식되지 않는다)
컨테이닝 블록 : 요소의 크기나 위치는 컨테이닝 블록에 영향을 받으며, position 스타일 속성의 값에 따라 요소의 컨테이닝 블록이 달라진다.
| 속성 값 | 설명 |
| static, relative | 그 요소와 가장 가까운 블록 레벨 조상 요소의 콘텐츠 영역(content-box) |
| absolute | 조상 요소 중 가장 가까운 위치 지정 요소의 padding을 포함하는 영역이거나 조상 요소 중 위치 지정 요소가 없는 경우 초기 컨테이닝 블록 |
| fixed | 브라우저 화면(viewport) |
* 블록 레벨 요소는 display 스타일 속성의 값이 block, inline-block, list-item, table 등인 요소를 말한다
* 최상위 요소의 컨테이닝 블록은 초기 컨테이닝 또는 초기 컨테이닝 블록으로 부르는 사각형이다.
* 초기 컨테이닝 블록은 일반적으로 브라우저 화면이 된다.
기준 영역
위치 지정 요소가 배치될 때 기준으로 삼는 영역을 말하며, position 스타일 속성의 값에 따라 요소의 기준 영역이 달라진다
| 속성 값 | 설명 |
| relative | 요소가 문서의 일반적인 흐름에 따라 배치됐을 때의 영역 |
| absolute, fixed | 컨테이능 블록 |
* position 스타일 속성의 값이 static인 경우에는 top, bottom, left, z-index 스타일 속성에 영향을 받지 않는다.
top, right, left, bottom 속성
기준 영역과 요소 사이의 간격을 설정
| 속성 값 | 설명 |
| auto (기본값) | 상황에 따라 브라우저가 계산해서 설정 |
| Length | 크기 단위를 사용해서 설정 |
| percentage | 컨테이닝 블록 크기의 백분율로 설정 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css position</title>
<style>
#container {
box-sizing: border-box;
background-color: #efe;
width: 1000px;
height: 400px;
border: 3px solid green;
position: relative;
}
#container > div {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 100px;
background-color: #fee;
border: 3px solid red;
text-align: center;
line-height: 100px;
}
.box:nth-child(1) {
left: 10px;
top: 10px;
}
.box:nth-child(2) {
right: 10px;
top: 10px;
}
.box:nth-child(3) {
left: 10px;
bottom: 10px;
}
.box:nth-child(4) {
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
</body>
</html>실행결과
▼ 소스코드 살펴보기
14 : div 요소들이 #container의 영역을 기준으로 배치 대도록 position 설정
18 : #container 요소의 영역을 기준으로 배치
(containing block : 조상 요소 중 가장 가까운 위치 지정 요소의 padding-box →container 요소의 padding-box)
궁금하신 점이나 이해하기 어려운 부분은
댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^
댓글과 하트는 저에게 많은 힘이 됩니다 :)
반응형
'Web > CSS' 카테고리의 다른 글
| CSS float 속성 (0) | 2021.08.23 |
|---|---|
| CSS 목록속성과 그림자 속성 (0) | 2021.08.06 |
| CSS 문단 속성 (0) | 2021.07.15 |
| CSS 글자속성 (3) | 2021.06.11 |
| CSS 배경속성 (0) | 2021.04.22 |
댓글