position : 문서 상에 요소를 어떻게 배치할지 기준을 지정.
| 값 | 설명 |
|---|---|
| static | 원래 문서 흐름상에 위치(기본값). top, bottom 등 위치 관련 속성 영향 X |
| relative | static과 동일하게 원래 흐릉상에 위치. top, bottom 등 위치 관련 속성 사용 가능. |
| absolute | 조상 요소들 중 position 값이 static이 아닌 조상 요소를 기준으로 위치. |
| fixed | 뷰포트를 기준으로 위치. |
| sticky | 일반적인 흐름에 배치, fixed와 비슷하게 동작. 임계점에 이르면 다시 문서 흐름에 따라 위치. |
offset : position 값의 따라 기준을 잡아 위치 변경. top, bottom, left, right 속성 사용.
<div class="container">
<div class="box"></div>
</div>.container {
height: 500px;
position : relative;
}
.box {
width : 50px;
height : 50px;
background : red;
/* 기본값. 원래의 문서 흐름대로 .container의 가장 상단 왼쪽에 위치. top 값 무시 */
position : static;
top : 20px;
/* static과 동일하게 원래의 문서 흐름대로 .container 안에 위치. 원래 흐름 상의 위치의 상단으로부터 20px 이동 */
position : relative;
top : 20px;
/* .container의 position 값이 static이 아니므로 .container 기준으로 절대 위치. .container의 우측에서 20px; 이동 */
position : absolute;
right : 20px;
/* 뷰포트를 기준으로 절대값= 위치. 뷰포트의 하단으로부터 50px 좌측으로부터 10px에 위치. */
position : fiexed;
bottom : 50px;
left : 10px;
/* 일반적인 흐름에 배치하고 fiexed 비슷하게 동작. 임계점을 벗어나지 않는다. */
position : sticky;
top: 20px;
}z-index : z축의 순서를 지정. position : static;인 경우 영향 X.
<div class="container">
<div class="box box01"></div>
<div class="box box02"></div>
<div class="box box03"></div>
</div>.container {
height: 500px;
position : relative;
}
.box {
width : 50px;
height : 50px;
position : absolute;
top 0;
}
.box01 {
background : red;
left : 0;
z-index : 3;
/* z-index 값이 가장 높으므로 가장 위를 덮는다. */
}
.box02 {
background : blue;
left : 20px;
z-index : 1;
/* z-index 값이 가장 낮으므로 가장 밑에 덮힌다. */
}
.box03 {
background : yellow;
left : 40px;
z-index : 2;
/* z-index 값이 중간이므로 box01과 box02 사이에 위치. */
}요소를 부동시키는 float
flot : 요소를 부동(floating)시키는 속성으로 텍스트 및 인라인 요소가 그 주위를 감싸게 된다.
| 값 | 설명 |
|---|---|
| none | 부동 하지 않는다. 기본값. |
| left | 컨테이너 요소의 왼쪽에 부동. |
| right | 컨테이너 요소의 오른쪽에 부동. |
clear : 선행 부동 요소를 해제.
| 값 | 설명 |
|---|---|
| none | 부동 요소를 해제하지 않는다. 기본값. |
| left | 왼쪽에 부동하고 있는 요소를 해제 |
| right | 오른쪽에 부동하고 있는 요소를 해제 |
| both | 양쪽의 부동 요소 모두 해제 |
<div class="container">
<div class="box"></div>
<p>이 텍스트들은 박스 주위를 감싸게 됩니다. 글의 길이가 충분해야 감쌉니다.</p>
</div>.box {
width : 100px;
height : 100px;
/* 컨테이너 요소인 .container의 왼쪽에 부동. p태그의 텍스트들이 감싼다. */
float : left;
}float된 요소의 특징
float된 요소는inline-block처럼 변한다.
=> 너비가 자신이 가진 컨텐츠의 너비만큼 줄어들고, 너비와 높이를 지정할 수 있다.
p {
float : left;
background-color : red;
}
이처럼 <p> 태그는 원래 블록 레벨 요소지만 자신이 가진 컨텐츠만큼 너비가 줄어들게 된다.
inline-block 처럼 너비와 높이 또한 지정 가능하다.
float된 요소의 바로 다음 요소(형제 요소)가 같은 방향으로float된다면 옆으로 나열된다.
=> 블록 요소지만 나열해야될 때 사용할 수 있다.
.box {
width: 100px;
height : 100px;
margin-right:10px;
background-color : red;
float : left;
}
100px의 너비와 높이를 가진 .box 요소를 두개 float : left로 같은 방향으로 부동시키면 왼쪽에서 오른쪽으로 차례대로 나열된다.
float된 요소는 공중에 떠있는 것과 같은 상태이기 때문에 부모 요소 안에float된 요소만 있을 경우 부모 요소가 높이 계산을 하지 못한다.
.container {
width: 500px;
border: 3px solid black;
}
.box {
width: 100px;
height : 100px;
margin-right:10px;
background-color : red;
float : left;
}
.container 요소가 자식 요소인 .box의 높이를 인식하지 못해서 height의 값이 0이 된다.
마지막 float된 자식 요소 다음으로 오는 요소(블록)에 clear 속성을 지정해 문제를 해결하는 방법이 있다.
=> 부모 요소에 마지막 자식 요소 뒤에 가상의 요소를 추가하는 ::after를 많이 사용한다.
.container::after {
content: "";
display:block;
clear : both;
}
