Position
static
<head>
<style>
html{
border: 1px solid gray;
}
div{
margin: 10px;
border: 1px solid tomato;
}
#me{
position: static;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
- 모든 태그들의 속성들은 기본값들을 가지고 있는데 이것을 static 이라고 한다.
- #me 에 position 값을 static으로 설정했을 경우, offset(위치조정값) 값을 설정을 해두어도 적용이 되지 않는다.
relative
<head>
<style>
html{
border: 1px solid gray;
}
div{
margin: 10px;
border: 1px solid tomato;
}
#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>
- static 상태에서 부모 태그 기준으로 offset 값만큼 위치가 변경된다.
- left, right, top, bottom 을 사용하여 위치를 조정한다.
- 우선순위 : left >> right, top >> bottom
absolute
<style>
#parent, #other{
border: 5px solid tomato;
}
#parent{
position: relative;
}
#me{
background-color: black;
color: white;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
- position 값을 absolute로 설정할 경우,
<html>의 element의 위치를 기준으로 해서 offset 값이 적용된다.
- offset값을 설정하지 않는 경우, 부모태그 기준으로 위치가 설정된다.
- element에 absolute를 설정할 경우 부모,자식태그 간의 연결이 끊어지게 된다.
- 자식태그가 absolute인 경우 부모태그가 static이 아닌 태그가 나타날때까지 무시하다, static이 아닌 부모가 나타날 경우 그 태그를 기준으로 위치를 정한다.
fixed
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#parent, #other{
border: 5px solid tomato;
}
#large{
height: 10000px;
background-color: tomato;
}
#parent{
position: relative;
}
#me{
background-color: gray;
color: white;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">large</div>
</body>
- fixed 스크롤에 상관없이 자기 위치가 고정된다.
- fixed는 absolute와 같이 offset을 설정할 경우
<html>element 기준으로 위치가 설정된다.
