html의 태그들, 엘리먼트가 화면상의 어디에 위치할 것인가라는 것을 결정한다.
엘리먼트의 위치를 지정하는 5가지 방법을 자세히 알아보자.
CSS 위치 기본값이 static으로 설정되어 있다. 박스, 컨텐츠들이 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 한 마디로 요소를 일반적인 문서 흐름에 따라 배치한다. top, bottom, right, left, z-index 속성에 영향을 받지 않는다.
반면에 relative는 다르다. top, top, bottom, right, left, z-index 속성에 영향을 받아 위치 조절이 가능하다.
예시를 보자.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
margin: 30px;
border: 2px solid red;
background-color:green;
}
.box {
background-color: yellow;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div>1</div>
<div class="box">2</div>
<div>3</div>
<div>4</div>
</body>
</html>
box class에 left, top 속성에 100px을 적용했지만 노란색 상자가 박스가 움직이지 않는 것을 볼 수 있다. css default position이 static으로 적용되어있기 때문에 top, bottom, right, left, z-index 속성 영향을 받지 않는다. 그러면 박스 클래스 스타일에 position:relative;
를 추가해보자.
.box {
background-color: yellow;
left: 100px;
top: 100px;
position:relative;
}
위 그림과 같이 left: 100px; top: 100px;
속성이 적용되어 노란색 박스의 위치가 옮겨진 것을 확인할 수 있다.
따라서 각각의 태그가 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동하기 위해서는 position : static -> relative로 변경하여 사용해야 한다.
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면 absolute는 position:static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준된다.
<!DOCTYPE html>
<html>
<head>
<style>
#parent, #other, #grand{
border:5px solid tomato;
}
#grand{
position: relative;
}
#me{
background-color: black;
color:white;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="grand">
grand
<div id="parent">
parent
<div id="me">me</div>
</div>
</div>
</body>
</html>
위 코드는 div태그 안에 부자 관계가 grand > parent > me 순으로 되어있다. me가 parent를 기준으로 위치가 지정되있지 않고 grand로 되어있는 것을 그림을 통해 확인할 수 있다. parent의 position은 static이기 때문에 absolute로 설정되어있는 me는 static을 가지고 있지 않은 부모를 찾아 위치를 지정하려고 한다. 결국 relative로 설정된 grand를 기준으로 위치가 지정된다.
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 윈도우 범위 안에서 움직인다. fixed를 설정한 특정 엘리먼트들은 위치가 고정되어 스크롤로부터 완전히 독립된다. absolute와 같이 width와 height 값을 지정하지 않으면 자기 컨텐츠 크기를 가진다.
위 그림은 만든 Portfolio 웹사이트다. 위 navbar가 fixed로 고정되어 있어 스크롤로부터 독립되어 있는 것을 확인할 수 있다. fixed를 적용하면 엘리먼트의 위치가 어디든 독립되어 나타난다.
sticky를 사용하면 엘리먼트 요소를 한 곳에 고정시키면서 다른 요소와는 겹쳐지지 않는다. fixed와 relative 특징을 동시에 가진 속성이라 인지하면 된다. relative처럼 동작하면서 relative 요소가 없는 경우에는 fixed처럼 동작하는 두 가지 효과를 모두 가진다.
sticky를 사용할 경우 이 두 가지 설정 여부를 확인해야 한다.
<!DOCTYPE html>
<html>
<head>
<style>
.All {
width: 100%;
height: 2000px;
}
.box1 {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: red;
}
.box2 {
display: inline-block;
position: sticky;
top: 10px;
width: 80px;
height: 80px;
background: blue;
}
</style>
</head>
<body>
<div class="All">
<div class="box1">
relative
</div>
<div class="box2">
sticky
</div>
</div>
</body>
</html>
위 코드를 실행하면 그림과 같이 만들어진다. 스크롤할 경우 relative는 시아에서 사라지게되지만 sticky는 다른 relative 요소를 만나기 전까지 해당 위치에 고정되어 나타나게 되는 것을 확인할 수 있다.
MDN position
Zerocho CSS 포지션(position)
드림코딩 CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
생활코딩 포지션
WEBISFREE [CSS] 스크롤해도 엘리먼트가 움직이지 않는 방법, Position Sticky