CSS
[CSS] position
기록하는_사람
2022. 9. 14. 23:08
position : fixed
📌 fixed
: 위치 고정.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
div {
height: 50px;
width: 50px;
background-color: darkgray;
position: fixed;
}
#first {
background-color: darksalmon;
}
</style>
</head>
<body>
<div id="first"></div>
</body>
</html>💡 스크롤해도 위치가 고정되어 있음.
처음 위치한 곳에 고정되며 위치 변경이 가능함.
top, left, bottom, right 중 하나의 속성이라도 설정하면 위치가 변경됨.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
div {
height: 300px;
width: 300px;
background-color: darkgray;
}
#first {
background-color: darksalmon;
}
#second {
background-color: darkcyan;
position: fixed;
width: 350px;
top: 5px;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
</body>
</html>💡 변경 전에는 같은 레이어 상에 위치하기 때문에 겹쳐서 그려지지 않음.
속성 설정을 한 경우, 가장 위에 위치한 레이어에 그려지기 때문에 겹쳐서 그려지게 됨.
(top: 5px; 지우면 확인 가능)
position : static
📌 static
: 레이아웃이 박스를 처음 위치하는 곳에 두는 것.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
div {
height: 300px;
width: 300px;
background-color: darkgray;
}
.darksalmon {
background-color: darksalmon;
height: 100px;
width: 100px;
position: static;
}
</style>
</head>
<body>
<div>
<div class="darksalmon"></div>
</div>
</body>
</html>
position : relative
📌 relative
: 요소가 처음 위치한 곳에서 상, 하, 좌, 우로 이동.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
div {
height: 300px;
width: 300px;
background-color: darkgray;
}
.darksalmon {
background-color: darksalmon;
height: 100px;
width: 100px;
position: relative;
top: -15px;
left: -15px;
}
</style>
</head>
<body>
<div>
<div class="darksalmon"></div>
</div>
</body>
</html>
position : absolute
📌 absolute
: 가장 가까운 relative 부모를 기준으로 이동.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
div {
height: 300px;
width: 300px;
background-color: darkgray;
position: relative;
}
.darksalmon {
background-color: darksalmon;
height: 100px;
width: 100px;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div>
<div class="darksalmon"></div>
</div>
</body>
</html>
📌 relative한 것이 없을 경우, body를 기준으로 이동.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
div {
height: 300px;
width: 300px;
background-color: darkgray;
}
.darksalmon {
background-color: darksalmon;
height: 100px;
width: 100px;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div>
<div class="darksalmon"></div>
</div>
</body>
</html>