21'C 흐림
서울 강남구
position
포지션은 float과 동일하게 이동 설정형 레이아웃이지만, float과는 다르게 광범위한 개념을 가지고 있는 기능입니다.
[코드]
position : static|relative|fixed|absolute|sticky;
static : 정적으로 적용, 기본형, 정상적인 흐름으로 배치됩니다.
relative : 방향 키를 적용시킬 수 있는 모드로 상대적 흐름으로 배치됩니다.(상, 하, 좌, 우의 코드를 적용 가능[top, bottom, left, right])
fixed : 뷰포트를 기준으로 페이지가 고정되어 배치됩니다.(하단에 고정되어 따라다니는 top버튼 등에 많이 사용됩니다.)
absolute : 가장 가까운 컨테이너의 포지셔닝에 따라 흐르게 되며, 종속된 부모가 없다면 본문을 따라 이동됩니다.
sticky : 지정한 요소에 스크롤이 닿으면 고정되어 계속 콘텐츠를 보여줍니다. (ie, edge15이전 버전 적용 안됨/ safari는 -webkit-사용해야 함)
[예시]
<style>
div.relative{
position:relative;
width:400px;
height:200px;
border:1px solid #0066ff;
}
div.absolute {
position:absolute;
top:80px;
right:0;
width:200px;
height:100px;
border:1px solid #ff0000;
}
</style>
<div class="relative">
This div element has position : relative
<div class="absolute">
This div element has position : absolute
</div>
</div>
relative에 포함된 absolute의 적용 모습