Position 속성
<body>
<div class="main-background">
<button class="test-btn1">button</button>
<button class="test-btn2">button</button>
<button class="test-btn3">button</button>
<button class="test-btn4">button</button>
</div>
</body>.test-btn1 {
position: relative;
top: 100px;
left: 100px;
}
.test-btn2 {
position: static;
top: 100px;
left: 100px;
}
.test-btn3 {
position: fixed;
top: 100px;
left: 100px;
}
.test-btn4 {
position: absolute;
top: 100px;
left: 100px;
}- position 속성을 사용하면 top, left, right, bottom 값으로 개체의 위치를 변경할 수 있고, floating 상태가 된다
- position: relative > 내 현재 위치를 기준으로 top~~ 값을 상대적으로 적용, 또한 relative 속성을 가진 개체가 자식 개체의 기준점이 된다
- position: static > top~~ 값을 적용해도 포지션을 변경하지 않도록 해준다
- position: fixed > view port(현재 보여지는 브라우저) 기준으로 절대 위치를 적용, 즉 view port size 변경 혹은 스크롤 시에도 개체가 같은 곳에 위치한다(상단 navbar, 하단 플로팅 버튼 등에 활용)
- position: absolute > relative 속성을 가진 부모 개체의 위치를 기준으로 상대적인 top~~ 값이 적용된다
position: absolute 적용한 개체 가운데 정렬
.test-btn {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* 아무 값이나 적당히 넣어주면 됨 */
}- 5개 속성을 통해 position: absolute 상태에서 개체 가운데 정렬 해줄 수 있다
eunji yang