position이란 각 요소를 배치하는 방법에 대한 속성이다. postion 속성을 통해 배치 상법을 결정한 후,
top, bottom, right, left
에 크기를 주어 해당요소를 원하는 곳에 위치시킬 수 있다.
1.fixed : 고정위치 지정방식
fixed는 사용자가 스크롤을 내리든 올리든 처음있던 '그 위치'에 고정시키는 것이다. top에 있는 header나 nav, 혹은 챗봇같은 필수 기능들의 위치를 고정시킬 때 자주 쓰인다.
사용법)
header{positon:fixed;}
사용시 주의할 점으로는 요소의 위치를 고정시킬때 다른 요소들이 가려질 수 있다는 점이다. 만약 height가 50px인 nav바를 고정시켜놨다고 하면 main의 상위 50px은 스크롤을 내려도 fixed된 nav바에 의해 보이지 않게 된다.
main{padding-top:50px;}이때, 위와 같이 가려진 공간만큼 padding-top을 주면 된다. 위에 빈공간을 만드는 원리이다.
2. relative :상대위치
relative는 해당 요소를 그 방향으로 눌러서 이동시키는 속성이다. 다른 요소에 영향을 끼치지 않으며, 겹치든 말든 '해당'요소만 그 방향으로 밀어 위치시킨다.
예를 들어,
.box{
postion:relative;
bottom:20px;}
위의 요소는 위로 20px 이동한다.bottom을 쓰면 아래에서 해당 픽셀만큼 떨어지라는 뜻이다.
3. absolute:절대 위치
absolute는 해당 요소에 영향을 주지 않는다는 점은 relative와 동일하다.
(겹치는 것은 relative, absolute 둘다 가능하다)
absolute는 기본적으로 기준이 사용자 화면이다. 하지만 부모요소에 position:relative를 주면 부모 요소를 기준으로 위치 선정이 가능하다.
absolute는 다른 요소와 상관없이 가장 아래에 위치 시켜야 할 때, 무조건 한가운데에 위치해야 할때 등에 쓰이는데
예를 들어 footer를 무조건 맨 아래에 딱 달라붙게 하고 싶을 경우,
footer{
position:absolute;
bottom:0;}를 쓰면 footer가 하단에 고정된다.
4. sticky (static+fixed)
sticky는 static과 fixed의 속성을 둘 다 가진 position의 속성이다. 말 그대로 스티커처럼 움직이다가 어느순간 딱 달라붙어 사용자의 화면에 고정된다. 이때, 스크롤바가 기준이다. 스크롤바를 내리면서 그 요소가 다 보일 때까지 static되지만, 스크롤바를 해당요소가 안보일정도로 내리면 fixed되어 사용자의 화면에 위치가 고정된다.
스크롤뷰가 시작된 이후부터 top이 0이된다.
absolute와 relative의 차이점
상대위치(relative)는 원래 있어야 할 곳에서 속성값에 따라 새롭게 위치를 지정하는 방식이고, 절대위치(absolute)는 부모요소를 기준으로 위치를 새롭게 지정하는 방식이다. 부모요소가 없을 경우 사용자의 화면이 기준이 된다. 부모요소가 있다면, 그 부모요소의 위치가 바뀔 때 같이 이동한다. 하지만 같은 자손끼리와의 관계의 요소는 완전히 무시된다.
z-index
절대 위치에 있는 요소끼리 겹쳐질 때 z-index로 어떤 요소를 위로 올릴 것인지 설정할 수 있다. 이 속성값이 높으면 상대적으로 상단에 위치하게 된다.
z-index의 경우 같은 페이지 내에 자주 쓰이기 때문에, 속성값을 줄 때 100,1000등 큰 단위로 준다. 이렇게 주면 z-index끼리 겹치는 일을 막을 수 있다.
심화
header{
height:80px;
position:fixed}
main>aside{
position:sticky;
height:calc(100vh - 80px);
top:80px;위 코드에서 aside요소는 sticky속성을 가지므로
밑으로 내려오다가 요소가 top:0이 되는 순간부터 고정된다. 이때, 윗부분이 fixed된 header에 의해 80px이 가려지게 된다. 이때 top:80px로 윗쪽에 여백 80px을 주고 , 원래 height에 80px을 빼주면 가려지는 곳 없이 위치시킬 수 있다.
