엘리먼트의 위치를 지정하는 4가지 방법이 있습니다.
static
relative
absolute
fixed
이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다.
static vs relative
bottom과 top이 나오면 top이 우선 left와 right가 나오면 left가 우선
기본적으로 static이라는 position값을 가지고 있다
<!DOCTYPE html>
<html>
<head>
<style>
html{border:1px solid gray;}
div{border:10px 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
원래는 부모 엘리먼트를 기준으로 자기의 위치가 생긴다
absolute로 하게되면 더이상 부모와는 상관이 없어진다
parent를 relative로 하면 me는 parent의 위치를 기준으로 자신의 위치를 지정한다
absolute는 부모 중에 위치가 정해진 것을 기준으로 위치가 정해진다
fixed
<!DOCTYPE html>
<html>
<head>
<style>
body{
padding-top:30px;
}
#parent,#other,#grand{
border:5px solid tomato;
}
#large{
height:10000px;
background-color:tomato;
}
#me{background-color:black;
color:white;
position:fixed;
right:0px;
bottom:0px}
width:100%
height:30px;
text-align:center
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</div>
</body>
</html>
'웹(Web) > CSS' 카테고리의 다른 글
| media query (0) | 2021.04.15 |
|---|---|
| Flex (0) | 2021.04.15 |
| 마진겹침 현상 (0) | 2021.04.15 |
| Box-sizing (0) | 2021.04.15 |
| 박스모델 (0) | 2021.04.15 |
댓글