티스토리 뷰
position 속성
- static: 순서대로 배치
- relative: 자신이 원래 위치할 위치를 기준으로 상대적인 위치를 설정할 수 있다.
- absolute: 기준점에 따라 특별한 위치에 위치시킬 수 있다. 기준점은 상위 엘리먼트들 중에 static이 아닌 position이 기준점이 된다. 현재는 wrap이 position:relative 이기 때문에 기준점이 된다.
- fixed: 고정된 위치에 위치시킬 수 있다. 예) 따라다니는 광고
소스
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Seogineer</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="static">static(default)</div>
<!--
순서대로 배치
-->
<div class="relative">relative(left:10px)</div>
<!--
자신이 원래 위치할 위치를 기준으로 상대적인 위치를 설정할 수 있다.
-->
<div class="absolute">absolute(left:130px,top:30px)</div>
<!--
기준점에 따라 특별한 위치에 위치시킬 수 있다.
기준점은 상위 엘리먼트들 중에 static이 아닌 position이 기준점이 된다.
현재는 wrap이 position: relative이기 때문에 기준점이 된다.
-->
<div class="fixed">fixed(top:250px)</div>
<!--
고정된 위치에 위치시킬 수 있다.
예) 따라다니는 광고
-->
</div>
<script src="script.js"></script>
</body>
</html>CSS
.wrap {
position: relative;
}
.wrap > div {
width: 150px;
height: 100px;
border: 1px solid gray;
}
.relative {
position: relative;
left: 10px;
}
.absolute {
position: absolute;
left: 130px;
top: 30px;
}
.fixed {
position: fixed;
top: 250px;
}결과
'Language > HTML&CSS' 카테고리의 다른 글
| 선언방법 (0) | 2020.12.06 |
|---|---|
| 미디어쿼리 min-width와 max-width (0) | 2020.12.05 |
| display 속성 (0) | 2020.12.04 |
댓글
