div {
top: 0;
bottom: 10px;
left: 20px;
right: 30px;
position: absolute;
position: relative;
position: fixed;
}
top
, bottom
, left
, right
: 요소의 각 방향별 거리 지정
elative
: 요소 자신을 기준
absolute
: 위치 상 부모요소 기준
fixed
: 뷰포트 기준
div {
position: relative;
/* 아래처럼 이동시키는건 권장되지 않음 */
top: 10px;
right: 30px;
}
자기 자신을 기준으로 삼아 자신의 위치를 변경 가능
relative로 자신의 위치 변경 시 기존 위치가 빈 공간으로 남아있게 되어 추천하지 않음
div {
position: relative;
}
div {
position: absolute;
bottom: 20px;
left: 15px;
}
relative가 부여된 가장 가까운 상위 요소를 기준으로 삼아 자신의 위치를 변경
만약 relative 요소가 없다면 뷰포트가 기준이 됨
absolute 요소는 display 속성이 block 으로 바뀜
div {
position: fixed;
top: 0px;
}
뷰포트 기준으로 위치를 고정시켜 스크롤을 해도 움직이지 않음
fixed 요소는 display 속성이 block 으로 바뀜