포지션(position)
- position은 기본적인 속성은 static이다. → position: static; (기본 속성이라 생략 가능) → 일반적인 문서의 흐름에 따라 자연스럽게 흘러가는 속성이다.
- 출력 예시
출력 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
}
.box5 {
width: 300px;
height: 300px;
background-color: bisque;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>- relative → position: relative; → 내 앞에 있는 엘레멘트의 상대적 위치를 결정한다.
- 출력 예시
출력 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
position: relative;
top: 100px;
left: 100px;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
}
.box5 {
width: 300px;
height: 300px;
background-color: bisque;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>- absoulte → position: absoulte; → 도화지를 한 장 더 얹어서 그 위에 그림을 그리는 것 (Z 인덱스)
- 출력 예시
출력 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
position: absolute;
top: 100px;
left: 100px;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
}
.box5 {
width: 300px;
height: 300px;
background-color: bisque;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>모든 그림을 그리는 시스템은 자식을 먼저 그리고 부모를 그린다.
그로인해 그림이 아래처럼 그려진다.
출력 2
출력 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
}
.box5 {
width: 100px;
height: 100px;
background-color: bisque;
display: inline-block;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>출력 1
출력 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
position: relative;
}
.box5 {
width: 100px;
height: 100px;
background-color: bisque;
display: inline-block;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>→ 부모를 relative를 걸고 자식을 absolute를 걸면 부모 안에서 자식이 놀게 된다. (문법)
→ 자식 absolute는 부모 relative 안에서 논다.
- fixed → position: fixed; → 화면의 스크롤을 내려도 위치가 고정되게 하는 것 → 브라우저를 기준으로 위치를 고정
Share article
