반응형
<!DOCTYPE html>
<html>
<head>
<style>
html{border:1px solid gray;}
div{
border:5px solid tomato;
margin:10px;
}
#me{
position: /*static*/relative;
/* static : 기본 상태, 위치 이동이 이뤄지지 않음 relative : static이었을 때를 기준으로 위치 이동*/
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
#parent, #other, #grand{
border:5px solid tomato;
}
#grand{
position: relative;
}
#me{
background-color: black;
color:white;
position: absolute;
/*absolute : 가장 가까운 부모 요소 중 static이 아닌 요소의 위치를 기준으로 위치 이동*/
/*relative 속성이 사용된 grand id를 기준으로 위치 이동 그리고 absolute를 사용하면 부모와 무관해진다.
relative가 사용되지 않으면 html을 기준으로 위치가 이동된다.*/
left:1rem;
top:1rem;
}
</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><!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; /*html을 기준으로 위치가 이동*/
left:1rem;
top:1rem;
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>반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] media query (0) | 2024.03.06 |
|---|---|
| flex (0) | 2024.02.19 |
| 마진겹침 현상 (0) | 2024.02.19 |
| box-sizing (0) | 2024.02.19 |
| 인라인 vs 블럭레밸 (0) | 2024.02.19 |