- position 속성 - relative, absolute, fixed
position의 기본값은 static이다.
- static : 유형(기준) 없음 / 배치 불가능
- relative : 요소 자신을 기준으로 배치
- absolute : 위치 상 부모요소를 기준으로 배치
- fixed : 브라우저(뷰포트)를 기준으로 배치
(1) relative
태그의 위치를 변경하고 싶을때 top, right, bottom, left 속성을 이용하여 조절한다.
자기 자신을 기준으로 하다보니까 주변의 영향을 받거나 영향을 주기 때문에 조심 해야한다.
position 을 relative 로 지정하면 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 할 수 있습니다. position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않음을 이야기 하는 것입니다.
div.relative {
position: relative;
left: 100px;
top: -100px;
}(2) absolute
위치상의 부모요소를 기준으로 하고 부모요소로 기준으로 하기때문에 배치가 무시가 된다.
여기서 위치상의 부모요소는 구조상의 부모요소와 다르게 position속성이 부여된 부모이다.
.grand-parent{
width: 200px;
height 300px;
padding: 20px 50px 50px 20px;
border: 1px solid black;
position: relative;
}
.parent{
width: 200px;
height 300px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
background: gray;
margin: 10px;
border: 2px solid black;
}
.new-box{
position: absolute;
top: 10px;
left: 50px;
}위에 상황에서는 parent에 position값이 없고 grand-parent의 position: relative이 있다.
parent는 위치상의 부모로 가치가 없으므로 조상요소의 일부분으로간다.
그렇기 때문에 위치상의 부모는 grand-parent가 되어서 배치가 된다.
parent 기준으로 하고싶으면 parent에 position: relative을 추가하면 된다.
(3) fixed
absolute도 브라우저(viewport)의 기준이 될 수 있지만 위치상 부모 기준이다.
그에비해 fixed는 언제나 브라우저(viewport)의 기준이다.
이런 속성은 쇼핑몰에 배너라든지 챗봇 같은 body의 길이에 따라 고정되는 기능에 사용된다.
