<div>는 문서 기준으로는 항상 고정된 위치에 있다. (static) 때문에 scroll 한다고 <div>의 위치가 바뀌는 것이 아니다. 하지만 static이 아닌 relative, absolute, fixed 속성으로 변화를 줄 수 있다.
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
.spacer{
height: 500px;
background-color: #999;
}
#one{
/* 원래 배치되어야 하는 위치를 기준으로 배치 */
position: relative;
/* 위에서 떨어진 거리 (y좌표) */
top: 150px;
/* 왼쪽에서 떨어진 거리 (x좌표)*/
left: 150px;
}
/* absolute 는 특정 요소를 기준으로 절대 좌표에 배치 하고자 할때 사용한다. (특정 요소는 부모 요소인데 부모요소의 position 속성이 명시적으로 지정 되어 있어야 부모 요소를 기준으로 절대 좌표에 배치할 수 있다. */
#two{
/* 부모 요소가 position 속성이 없으면 body 기준으로 절대 좌표에 배치 */
position: absolute;
top: 100px;
left: 100px;
}
/* fixed 는 window 기준으로 절대 좌표에 배치 할때 사용한다.
따라서 스크롤바를 움직여도 window 기준으로 항상 같은 위치에 존재한다. */
#three{
position: fixed;
top: 100px;
left: 200px;
}
#four{
/* 부모 요소가 position 속성이 없으면 body 기준으로 절대 좌표에 배치 */
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box">static</div>
<div class="box" id="one">relative
<div class="box" id="four">test</div>
</div>
<div class="spacer"></div>
<div class="box" id="two">absolute</div>
<div class="box">너는 어디?</div>
<div class="box" id="three">fixed</div>
</body>
relative : 글자 그대로 상대적인 위치를 말한다. 원래 들어가야 할 위치를 기준으로 한 상대적인 위치이다.
absolute : 글자 그대로 절대적인 위치를 말한다. 특정 요소를 기준으로 한 절대 좌표에 배치하고자 할 때 사용한다. 만약 부모 요소에 position 정보가 없다면 body를 기준으로 한 절대 좌표에 배치된다.
fixed : 보고 있는 화면을 기준으로 절대 좌표에 배치한다. 때문에 화면 스크롤을 해도, 해당 객체는 화면 상에서 같은 위치에 계속 배치되어 있다.
댓글