![[CSS] 10. CSS Position](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A16%3A50.959Z-47eb8491-bcfc-489f-8f07-a97280ee9e27&w=3840&q=75)
1. static
- flow가 왼쪽에서 오른쪽
- 다 차면 밑으로 가서 다시 왼쪽에서 오른쪽
- position의 default값
<!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>
2. 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>
3. absolute
종이가 한 장 더 만들어서 덧댄다
설정한 box만 위로 튀어나온..초록색은 static이니까 옆으로 정렬돼서 가려진다
top과 left가 body이므로 left를 0으로 설정
<!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: 0px;
}
.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>4. 박스 안의 박스
- 움직일 박스를 박스 안에 넣는다
<div class="box4">
<div class="box5"></div>
</div>- 부모 박스의 position 속성 relative 지정
.box4 { width: 300px; height: 300px; background-color: blue; display: inline-block; position: relative; }
- 자식 박스의 position 속성 absolute 지정
.box5 { width: 50px; height: 50px; background-color: bisque; display: inline-block; position: absolute; }
- 위치 지정
.box5 { width: 50px; height: 50px; background-color: bisque; display: inline-block; position: absolute; top: 100px; left: 100px; }
<!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: 50px;
height: 50px;
background-color: bisque;
display: inline-block;
position: absolute;
top: 100px;
left: 100px;
}
</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>
5. fixed
화면 고정 (sticky)
스크롤을 하더라도 여전히 초록색 상자가 같은 위치에서 보이도록
<!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;
position: fixed;
top: 300px;
}
.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>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
<div class="box5"></div>
</body>
</html>
6. 예제
- 화면의 비율이 달라져도 여전히 빨간 박스가 input 안에 위치하도록 만들어 보자!
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1{
position: relative;
}
.box2{
border : 1px solid red;
width : 10px;
height : 10px;
display: inline-block;
position: absolute;
left: 153px;
top: 7px;
}
</style>
</head>
<body>
<div class = "box1">
<div class = "box2"></div>
<input type="text" placeholder="Search...">
</div>
</body>
</html>
Share article