포지션
엘리먼트의 위치를 지정하는 4가지 방법이 있습니다.
- static
- relative
- absolute
- fixed
- 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다.
static VS relative
예제 - position_1.html
<!DOCTYPE html>
<html>
<head>
<style>
html{border:1px solid gray;}
div{
border:5px solid tomato;
margin:10px;
}
#me{
position: relative;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
absolute
예제 - position_2.html
<!DOCTYPE html>
<html>
<head>
<style>
#parent, #other, #grand{
border:5px solid tomato;
}
#grand{
position: relative;
}
#me{
background-color: black;
color:white;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="grand">
grand
<div id="parent">
parent
<div id="me">me</div>
</div>
</div>
</body>
</html>
fixed
예제 - position_3.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
padding-top:30px;
}
#parent, #other{
border:5px solid tomato;
}
#large{
height:10000px;
background-color: tomato;
}
#me{
background-color: black;
color:white;
position: fixed;
left:0;
top:0;
text-align: center;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">large</div>
</body>
</html>
