position 은 HTML 의 요소를 원하는 위치에 배치하기 위해 사용한다.
1. Static
static 은 HTML 의 기본 배치로 설정하지 않으면 자동으로 설정된다. static 은 배치된 순서대로 표시된다. 따라서 static 일 때는 요소의 위치를 지정할 수 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
position: static;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
position: static;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
position: static;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
태그 안에 class 이름을 만들면 <style> 태그에 .클래스명으로 속성을 설정할 수 있다.
2.Relative
Relative 는 이전에 배치된 값을 기준으로 상대적인 위치로 배치하는 방법이다.
배치를 위해 left, right, top, bottom 을 사용한다.
<head>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
position: static;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
position: relative;
top: 50px;
left: 50px;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
position: static;
}
</style>
</head>
노란색을 기준으로 빨간색의 위치가 달라진다.
만약 이전 값이 없다면 Relative 는 body 를 기준으로 상대 위치가 결정된다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3. Absolute
absolute 는 이전 값을 기준으로 위치되는게 아니라 새로운 페이지에 위치한다. 따라서 absolute 는 body 를 기준으로 위치가 정해진다.
<style>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
position: static;
}
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
position: absolute;
top: 50px;
left: 50px;
}
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
position: static;
}
</style>
absolute 의 활용은 부모 클래스를 relative로 설정하고, 자식 클래스를 absolute 를 사용하는 방식으로 활용한다. 설명은 다음 블로그에서 예제와 함께 설명하겠다.
4. Fixed
Fixed 는 브라우저의 스크롤을 쭉 내리더라도 고정적으로 위치시킨다. 주로 광고나, 스크롤 맨 위로 가는 버튼을 Fixed 로 사용한다.
<!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: bisque;
display: inline-block;
position: fixed;
top: 50px;
right: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<br> 이 많은 건 스크롤을 만들기 위함이다.
사진에는 표시되어있지 않지만, 다른 박스는 스크롤을 내리면서 사라졌지만 box3은 스크롤을 내려도 계속 표시된다.
Share article