css postioning
화면 상 어디에 위치시킬 것인가 지정하는 속성
html화면 기준 x, y좌표를 지정해 위치를 조정한다.
1. static
: position 속성의 기본값으로 다른 요소와의 관계를 가지며 자동으로 배치되어 위치 조정 불가능하다. 따라서 top, left, right, bottom 설정을 할 수 없다. 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 아이템들이 쌓인다.
2. relative
: 다른 요소와의 관계를 가지며 자동으로 자신이 원래 있던 위치(즉, static일 때)를 기준으로 좌표를 지정한다.
주로 absolute속성과 같이 쓰일 때, 부모 컨테이너에 relative를 준다.
3. absolute
: 절대위치를 기점으로 좌표를 설정하고, static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
4. fixed
: window 즉 페이지를 기준으로 위치 설정(다른 position 값을 다 무시) 되며 스크롤을 내려도 항상 화면상의 그 위치에 있다. 화면의 절대 위치를 설정으로 위치가 고정되어진다. 그래서 보통 퀵메뉴, 메뉴바에 사용을 많이 한다.
5. sticky
: 원래 자리에 있으면서 대신 스크롤링 될 때, 없어지지 않고 원래 자리에 계속 위치함
예시
<body>
<div class="box1">static</div>
<div class="box2">relative</div>
<div class="box3">absolute</div>
<div class="box4">fixed</div>
</body>body{
border:3px solid green;
}
.box1{
width:70px;
height:70px;
background-color: pink;
position:static;
}
.box2{
width:70px;
height:70px;
background-color: purple;
position: relative;
left:60px;
bottom:20px;
}
.box3{
width:70px;
height:70px;
background-color: orange;
position: absolute;
top: 30px;
left:30px;
}
.box4{
width:70px;
height:70px;
background-color: red;
position: fixed;
left:30px;
}반응형
'HTML & CSS' 카테고리의 다른 글
| [CSS] 배경 이미지 (0) | 2020.04.26 |
|---|---|
| [HTML5 / CSS3] overflow속성 (0) | 2020.04.25 |
| [HTML5 / CSS3] 블럭 구조 vs 인라인 구조 vs 인라인블럭 구조 (0) | 2020.04.25 |