이미지는 내용과 무관하나 이름이 비슷해서 재밌어서 가져왔다.
2주차 위클리페이지로 Position 속성과 특징에 대해 정리하는 시간을 가져보았다.
Position 속성에는 5가지의 종류가 있다.
위치를 지정해주기위해 position : top, left, right, bottom 속성을 함께 사용한다.
position: static
position설정을 입력하지 않았을 때 기초 설정 값이다.
static은 HTML 문서상의 원래 배치되어야 할 위치에 배치가 된다는 말이다.
그래서 top, left, right, bottom같은 속성은 적용되지 않는다.
이때는 기본적인 흐름을 따라서 배치가 된다.
기본적인 흐름은 우리가 글을 읽는것과 같은 배치이다.
position: relative
relative 속성은 원래 본인의 위치에서 움직일 수 있게하는 속성이다.
즉 기본적인 문서의 흐름을 따라가되, top, left, right, bottom 같은 속성을 통해서 문서상 본인의 위치를 기반으로 위치 지정이 가능하다.
position: absolute
absolute 속성은 부모 속성의 위치를 기반으로 배치하는 속성이다.
문서의 흐름상에서 본인은 제외가 되고 자신의 부모요소에서 static이 아닌 다른 값을 기준으로 위치를 설정한다.
만약 상위요소를 따라 올라갔을때 stitic이 아닌 다른 값이 없다면 body를 기준으로 잡는다.
보통 absolute의 부모요소로 relative를 사용한다.
position: fixed
fixed 속성은 viewport기준으로 배치하는 속성이다.
absolute와 마찬가지로 문서상 흐름에서 제외되고 브라우저 화면(viewport) 기준으로 top, left, right, bottom를 사용하여 위치를 설정한다.
보통 nav바가 고정적으로 보이거나 뭔가 알림같은 것을 구현할 때 사용한다.
position: sticky
sticky속성은 본인의 위치에 배치가 되지만 스크롤 시 부모요소를 기준으로 배치된다.
<main>
<div>1</div>
<div>2</div> // position: sticky, top:0px
<div>3</div>
<div>4</div>
</main>이게 무슨말이냐면 위와 같은 코드가 있다고 가정했을 때
스크롤을 내려서 <div>1</div>을 지나<div>2</div>가 top:0px에 닿은 순간부터 main이라는 태그가 viewport에서 사라지기 전까지 적용이 되는 속성이다.
정리하자면 sticky는 부모태그가 스크롤 되어 화면밖으로 나가기 전까지 해당 부모에 top, left, right, bottom로 지정한 위치에 붙어있는 태그이다.
