position 속성
position의 기본값은 static이다.
- static : 유형(기준) 없음 / 배치 불가능
- relative : 요소 자신을 기준으로 배치
- absolute : 위치 상 부모요소를 기준으로 배치
- fixed : 브라우저(뷰포트)를 기준으로 배치
-
sticky : 스크롤 영역 기준으로 배치
position: relative
태그의 위치를 변경하고 싶을때 top, right, bottom, left 속성을 이용하여 조절한다.
자기 자신을 기준으로 하다보니까 주변의 영향을 받거나 영향을 주기 때문에 조심 해야한다.
그래서 배치라는 개념을 사용할려면 absolute를 사용하는 것을 추천한다.
See the Pen wvJYapp by Hyemi Lee (@hhyemi) on CodePen.
position: absolute
위치상의 부모요소를 기준으로 하고 부모요소로 기준으로 하기때문에 배치가 무시가 된다.
여기서 위치상의 부모요소는 구조상의 부모요소와 다르게 position속성이 부여된 부모이다.
이때 staic을 기본값이기떄문에 제외하고 나머지 값을 부여해야한다. (relatice추천)
만약 위치상의 부모가 없는경우에는 body-> html -> window객체로 올라가게된다.
그럴때는 body html은 position값이 거의 없으므로 viewport로 간다.
See the Pen oNZaXrB by Hyemi Lee (@hhyemi) on CodePen.
위에 상황에서는 parent에 position값이 없고 grand-parent의 position: relative이 있다.
parent는 위치상의 부모로 가치가 없으므로 조상요소의 일부분으로간다.
그렇기 때문에 위치상의 부모는 grand-parent가 되어서 배치가 된다.
parent 기준으로 하고싶으면 parent에 position: relative을 추가하면 된다.
position: fixed
absolute도 브라우저(viewport)의 기준이 될 수 있지만 위치상 부모 기준이다.
그에비해 fixed는 언제나 브라우저(viewport)의 기준이다.
이런 속성은 쇼핑몰에 배너라든지 챗봇 같은 body의 길이에 따라 고정되는 기능에 사용된다.
See the Pen VwpEvbr by Hyemi Lee (@hhyemi) on CodePen.
body의 height:4000px의 속성을 주면 스크롤이 생기는데 fixed 속성으로 우측하단에 고정이 된다.
position: sticky
스크롤 영역, 기준으로 배치한다. IE에서는 지원하지 않는다.
top, right, bottom, left 속성을 하나이상 사용해야한다.
자바스크립트로 구현하기 힘든 부분을 css로 처리 할 수 있다.
See the Pen OJpByaG by Hyemi Lee (@hhyemi) on CodePen.
h1 부분에 position: sticky를 추가하고 top:0을 주었다.
해당 상위 section안에서 h1이 스크롤 기준으로 위에 고정된다.
section을 벗어날 순 없어서 해당 h1태그가 있는 section을 벗어나면 바뀐다.