CSS Position 속성
position 속성은 요소의 위치 기준이 된다.
position 속성으로 기준점을 잡고 top, buttom, left, right 로 위치를 이동시킨다.
position속성은 5가지가 있다.
static | 기본값 |
relative | 요소 자기 자신을 기준으로 함 |
absolute | 부모를 기준으로 함 |
sticky | 스크롤 영역을 기준으로 함 |
fixed | 뷰포트를 기준으로 함 |
Relative
기준을 자기 자신의 원래 위치(=static일 때 위치)로 두고 배치할 수 있다.
원래 위치에서 top bottom left right만큼 이동시킬 수 있다.
문서 상 원래 위치가 그대로 유지된다.
위치를 이동할 때 다른 요소에 영향을 주지 않는다.
<style>
div{
height : 100px;
width : 100px;
border : 1px solid black;
}
.relative{
border : 1px solid red;
position : relative;
top : 10px;
left : 10px;
}
</style>
<body>
<div class="div">
position = static
</div>
<div class="div relative">
position = relative
</div>
<div class="div">
position = static
</div>
</body>
두 번째 상자에 position : relative를 주고 top, left로 10px씩 주게되면 위와 같은 결과가 나타난다.
원래 위치를 기준(relative)으로 위와 왼쪽으로부터 10px씩 이동했다.
위치가 이동하였지만 원래 두 번째 div상자 자리로 세 번째 상자가 침범하지 않고,
두 번째 상자는 세 번째 상자와 위치가 겹치지만 아무 영향을 주지 않는다.
Absolute
요소를 이동할 때 부모 요소의 위치를 기준으로 잡고 이동한다.
부모 요소 중 position 속성을 가진 요소가 없으면 body를 기준으로 이동한다.
문서 상 원래 위치를 잃게 된다.
<style>
.div{
height : 100px;
width : 100px;
border : 1px solid black;
}
.parent{
border : 1px dashed black;
position : relative;
}
.absolute{
position : absolute;
top : 10px;
left : 10px;
}
</style>
<body>
<div class="parent">
<div class="div">
position = static
</div>
<div class="div absolute">
position = absolute
</div>
<div class="div">
position = static
</div>
</div>
</body>
두 번째 상자에 position : absolute를 주고 top, left로 10px씩 주게되면 위와 같은 결과가 나타난다.
부모 요소인 .parent에 position 속성이 정해져 있어 부모 요소를 기준점으로 잡고 위와 왼쪽으로부터 10px씩 이동했다.
position : absolute를 주게 되면 원래 위치를 잃게 되어 세 번째 상자가 첫 번째 div 상자 아래로 이동하게 된다.
Sticky
스크롤을 기준으로 삼는 position 속성이다
스크롤을 내렸을 때 sticky 속성을 지정해둔 div는 이동되지 않고 그 자리에 고정된다.
엑셀에서 행 고정이라고 생각하자
Fixed
뷰 포트를 기준으로 삼는 position 속성이다
스크롤을 내릴 때 해당 위치에 계속 고정되어 있다.
웹페이지에서 사이드 배너라고 생각하자