static
default값이라서 따로 position을 설정하지 않으면 static으로 설정된다.
<html>
<head>
<style>
div{
width: 400px;
border:5px solid blue;
margin:5px;
}
#me{
position: static; /* offset 적용이 안된다 */
left:40px; /* offset */
top:0 px; /* offset */
border: 5px solid red;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
relative
부모 엘리먼트의 위치를 기준으로 offset(left, right, top, bottom)을 이용하여 위치 이동이 가능하다.
<html>
<head>
<style>
div{
width: 400px;
border:5px solid blue;
margin:5px;
}
#me{
position: relative; /* 부모 엘리먼트 위치를 기준으로 상대적으로 offset을 사용해서 이동시킬 수 있다. */
left:40px; /* offset */
top:0 px; /* offset */
border: 5px solid red;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
absolute
static이 아닌 부모 엘리먼트를 기준으로 offset이 적용되고, static이 아닌 부모 엘리먼트를 찾아서 단계적으로 찾아간다.
부모 엘리먼트 중에 relative, absolute, fixed가 없다면 body태그를 기준으로 offset이 적용된다.
<html>
<head>
<style>
#parent, #other, #grand{
width: 200px;
border:5px solid blue;
}
#grand{
position: relative;
}
#me{
background-color: red;
color:white;
position: absolute; /* offset이 있는 경우에는 상위 엘리먼트 중에 static이 아닌 가장 가까운 상위 엘리먼트를 기준으로 잡고 offset을 적용시킨다. */
left:30px; /* offset이 없는 경우에는 한단계 바로 위에 있는 상위 element를 기준으로 위치시킨다. */
top:10px;
}
</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
최상위 부모 요소를 기준으로 offset이 적용되고, 스크롤을 올리거나 내려도 해당 위치에 고정된다.
<html>
<head>
<style>
body{
padding-top:30px;
}
#parent, #other{
width: 500px;
border:5px solid blue;
}
#large{
width: 40px;
height:10000px;
background-color: red;
}
#me{
width: 200px;
background-color: black;
color:white;
position: fixed; /* 스크롤과 무관하게 화면의 위치에 고정시킨다. */
left:150;
top:150;
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>
스크롤을 올리거나 내려도 me가 화면에 고정된다.
'개발 관련 지식 > CSS' 카테고리의 다른 글
CSS - 미디어쿼리 (0) | 2020.03.12 |
---|---|
CSS - flex (0) | 2020.03.12 |
마진 겹침 현상(margin-collapsing) (0) | 2020.03.12 |
CSS - box-sizing (0) | 2020.03.11 |
CSS - block vs inline (0) | 2020.03.11 |