Position
position은 문서 상에 요소를 배치하는 방법을 지정하는 속성이다.
value
1. static
요소를 일반적인 흐름에 따라 배치한다. 자주 사용하는 값이 아니다. (중요하지 않다는 뜻?) top, right, bottome, left, z-index속성이 아무런 영향을 주지 않습니다. 기본값 즉, 아무값도 지정하지 않았을 때 static 이기 때문에 별도로 써주지 않아도 된다.
예시를 한번 살펴보자.
<body>
<div class="po-1">position1</div>
<div class="po-2">position2</div>
<div class="po-3">position3</div>
<div class="po-4">position4</div>
</body>div {
display: inline-block;
border: 3px solid blue;
margin: 50px;
padding: 50px;
position: static;
}
.po-2 {
top: 100px;
left: 150px;
}
다음 그림처럼 두 번째 div position2에 top, left 값을 줘도 움직이지 않는 것을 볼 수 있다.
2. relative
static과 마찬가지로 요소를 일반적인 흐름에 따라 배치하긴 하지만 static과의 차이점은 자신의 위치에서 top, right, bottome, left, z-index속성에 따라 상대적(relative)인 위치에 배치된다. 하지만 다른 요소에 영향을 미치지는 않습니다. 결국 요소가 차지하는 공간은 static일 경우와 같습니다. 다른 요소의 위치는 일반적인 흐름으로 계속 남아있다.
예시를 살펴보자.
div {
display: inline-block;
border: 3px solid blue;
margin: 50px;
padding: 50px;
position: relative;
}
.po-2 {
top: 100px;
left: 150px;
} position 값을 relative로 변경했을 때 효과를 보자.
다음과 같이 top, left 값대로 이동하는 것을 볼 수 있다.
relative로 지정한 elemnet는 다른 요소에 영향을 주지않고 배치되는 특징이 있다.
position3의 위치에 영향을 일절 주지 않고 겹쳐서 이동하는 것을 볼 수 있다. 하지만 잘못 조절하다 글씨가 겹칠 수 있으니 조심해서 사용하자!.
3. absolute
relative와 달리 absolute는 문서의 흐름에서 제거된다. 즉 다른 요소는 absolute가 없는 것처럼 배치된다. absolute는 가장 가까운 부모 태그(static이 아닌)를 기준으로 배치된다. 만약 기준이 되는 부모 태그가 없다면 body를 기준으로 배치된다.
아래 그림을 보면 훨씬 쉽게 이해가된다. 위의 예시에서 조금 더 쉽게 시각화하기 위해 div에 배경색을 추가하였다.
예시를 살펴보자.
div {
display: inline-block;
border: 3px solid blue;
background-color: burlywood;
margin: 50px;
padding: 50px;
}
.po-2 {
position: absolute;
top: 100px;
left: 100px;
background: tomato;
} 
position1,3,4 가 마치 2를 무시하고 없는 것처럼 배치된다. absolute가 문서의 흐름에서 제거된다는 말이다. absolute 또한 겹쳐질 수 있기에 사용에 주의를 요한다.
4. fixed
스크롤에 상관없이 고정된 배치를 할 수 있다. fixed 또한 absolute와 비슷하게 문서의 흐름에서 제외되어 배치된다. 이번에는 position3을 페이지에 고정시켜보자. 이번엔 웹사이트에 스크롤을 할 수 있게 하기 위해 body 태그에 height: 500vh; 속성을 주었다.
예시를 살펴보자!
body {
height: 500vh;
}
div {
display: inline-block;
border: 3px solid blue;
background-color: burlywood;
margin: 50px;
padding: 50px;
}
.po-3 {
position: fixed;
background: tomato;
}
fixed 또한 문서의 흐름에서 제외되어 position4가 문서으 흐름대로 배치되고 겹쳐진 것을 볼 수 있다.
스크롤을 아래롤 조금 내려보았다.
스크롤을 내리더라도 내가 고정시키고 싶었던 position3 은 화면에서 고정된 것을 볼 수 있다.
fixed는 웹사이트 상단에 메뉴 목록이나 사이트 로고를 누르면 홈으로 이동하는 기능들이 모여있는 navigation-bar에 주로 사용된다. 사용자가 스크롤을 내렸을 때 다른 페이지로 이동하고 싶을때 마다 최상단으로 이동하여 다른 메뉴를 클릭하는 것은 상당히 불편한 일이다. 그렇기 때문에 상단에 고정시켜 어느 스크롤 위치에 있더라도 언제든 빠르게 다른 메뉴로 이동할 수 있게 한다.
position에 대해 공부해보았다. 이 속성을 잘 활용한다면 웹사이트의 멋진 레이아웃을 만들 때 유용하게 활용할 수 있을 것 같다.
