[프론트엔드] Position
최근 flex를 다뤄본김에 기본으로 다뤄볼만한게 또 뭐가 하나 있을까 하다 position에 대해 다뤄봐야겠다는 생각이 들었다.
그런의미에서 오늘은 포지션에 대해 끄적여보겠다.
Position이란 이름처럼 html 태그들의 위치를 결정하는 CSS이다.
position: static
모든 태그들은 기본적으로 position: static 상태이다. 차례대로 왼쪽부터 오른쪽, 위에서 아래로 쌓인다.
(기본값이기에 따로 정의하지 않아도 된다)
그리고 요소들의 미세한 조정, 레이아웃에 영향을 주지 않으면서 요소들의 위치를 조정하고 싶을때 relative, absolute, fixed같은 값들을 사용할 수 있다.
position: relative
요소가 기존 static이었을 때의 위치를 기준으로 위치를 조정할 수 있게 해주는 녀석이다.
기본적으로 태그는 html문서의 정상적인 흐름에 다라 배치되지만, 이와 별개로 시각적으로 위치를 조정하고 싶을때 top, right, bottom, left값에 따라 요소를 이동시킬 수 있다.
position: absolute
absolute는 가장 가까운 조상 요소 중 position이 relative, absolute, fixed로 설정된 요소를 기준으로 위치를 지정한다.
그렇다면 어떤 조상을 우선으로 섬기냐 싶을 수 있는데 relative -> absolute -> fixed -> sticky 순이다.
즉, relative 조상 요소가 없다면 absolute, fixed, sticky 순으로 살펴본다는 것이다.
여기서 가장 일반적인 경우는 relative 요소를 기준으로 움직이는 상황이다.
결론적으로 이러한 특징을 기반으로 문서의 정상적인 흐름에서 벗어나 레이아웃에 공간을 차지하지 않으면서 요소를 배치하고 싶을때 사용하는 녀석이다. 아래 예시를 보면 좀 더 와닿을 것이다.
position: fixed
position: fixed는 생각보다 우리 일상에서 쉽게 찾을 수 있는데, 일단 지금 보는 이 티스토리 홈페이지만 봐도 네비게이션 메뉴는 스크롤을 내려도 항상 화면 최상단에 고정되어 있는 것을 확인할 수 있다. 그 이뉴는 포지션이 fixed로 설정되어 있기 때문이다.
이처럼 fixed는 요소를 뷰포트 기준으로 고정시키며 여기서 뷰포트란 사용자가 웹 페이지를 보는 브라우저 창을 의미한다.
요소를 원래 문서의 위치에 고정시키며, 그렇기에 스크롤해도 fixed된 요소는 해당 위치에 계속 존재하게 된다.
아래는 예시에서 사용한 css코드이다.
.container {
position: relative; /* 기준이 되는 요소 */
height: 300px;
border: 1px solid black;
margin-bottom: 20px;
width: 50%;
margin: auto;
top:0;
text-align: center;
}
.relative-box {
position: relative;
top: 20px; /* 자기 자신의 기본 위치에서 이동 */
left: 20px;
width: 100px;
height: 100px;
background-color: lightgreen;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
}
.fixed-box {
position: fixed;
bottom: 70px;
right: 700px;
width: 100px;
height: 100px;
background-color: lightcoral;
}