1. position:
static
- HTML 요소는 기본값으로 정적인 위치를 부여받는다.
- Static 기능으로 위치가 설정되면, top, bottom, left, right 프로퍼티에 영향을 받지 않는다.
- position: static; 은 특별한 방법이 가미된 포지셔닝 기법이 아니며, 페이지의 각 요소별 배치 흐름에 따라 그 위치가 정해진다.
relative
- 기본 포지션에 상응하여 "position: relative"를 받은 요소의 위치가 결정된다.
- top, right, bottom, left의 프로퍼티를 따로 설정하게 되면 정상적인 위치에서 벗어나지게 된다. 이렇게 될 시, 다른 컨텐츠 들은 해당 요소가 야기한 빈칸에 들어갈 수 없게 되는 성질을 띈다.
fixed
- "position;fixed;"는 viewport에 상응하여 위치하게 되며 이는 페이지를 스크롤 업, 다운하더라도 같은 위치에 계속 머무른 다는 것을 의미한다.
- 해당 요소의 위치를 지정하기 위해 Top, right, bottom, left 프로퍼티를 설정해야 한다.
- fixed 된 요소는 페이지 안에서 빈칸이 없이 꽉채운다. fixed되지 않았다면 다른 요소의 해당 위치 개입이 가능하다.
absolute
- "position: absolute"은 앞서 작성된 가장 가까운 요소에 상응하여 위치하게 된다 (fixed에서, viewport의 기능에 따라 상대적으로 위치가 정해진 것 과 다른 형태)
- 하지만 만약 "position: absolute"로 정해진 요소에게, 위치가 정해진 조상요소가(ancestor) 없다면, 문서 body를 기준점으로 삼고 페이지를 위아래 스크롤링할 때 같이 따라 움직이게 된다. *여기서 언급한"위치가 정해진"은 static을 제외한 모든 요소를 의미한다.
<코드예시>
####[HTML FILE]####
<link rel="stylesheet" href="style.css">
<secion>static</br>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1</div>
<br>relative</br>
<span class="top">top</span>
<span class="right">right</span>
<span class="bottom">bottom</span>
<div class="left">left</div>
<br>absolute</br>
<div>
<div id="absolute">absolute</div>
</div>
<div id="parent">
<div id="child">children</div>
</div>
<br>fixed</br>
<div>
<div id="fixed">fixed</div>
</div>
####[CSS FILE]####
br {
font-size: 50px;
}
span, div {
background: skyblue;
}
span, div {
background: skyblue;
}
.top {
position: relative;
top: 5px;
z-index: 1;
}
.right {
position: relative;
right: 5px;
}
.bottom {
position: relative;
bottom: 5px;
}
.left {
position: relative;
left: 5px;
}
#absolute {
background: skyblue;
position: absolute;
right: 0;
}
#parent {
position: relative;
width: 100px;
height: 100px;
background: skyblue;
}
#child {
position: absolute;
right: 0;
}
#fixed {
background: skyblue;
position: fixed;
right: 20;
}
2. inline: 특정 문장의 모양을 방해하지 않고 한 문장, 문단안에 텍스트를 상자로 감쌀 수 있다.
3. block: 특정 문장을 한데 묶어서 블록화 한다. 블록화시 다음 공간에 대한 line-breaking 이 이루어져 선행 후행 요소들이 가로로 디스플레이 되는 특징을 지닌다.
4. inline-block: 위 display:inline과 비교해서 inline-block의 가장 큰 차이점은 내부 요소에 가로 세로 값을 세팅 할 수 있다는 점이다. 그리고 display: block과 비교할 시, inline-block은 각 요소 이후에 line-break(미리 줄바꿈)을 하지 않는다는 점이다. 따라서 각기 다른 요소가 서로의 좌우에 자리할 수 있다.
<코드예시>
5. float: