positon 속성값 - relative, absolute, fixed, sticky

1. relative

<div class="box">1</div>
<div class="box relative">2</div>
<div class="box">3</div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.relative{
  position: relative;
  bottom: 20px;
  right:30px;
}

위치에따라 옮겨진 박스들

 

 

relative의 문제점

<div class="box relative">2</div>
<div class="box">3</div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.relative{
  position: relative;
  bottom: 20px;
  left: 160px;
}

짤린 2번박스

다음에서 보는바와 같이 relative는 부모요소와 자식요소에 영향을 받기 때문에 다음과 같은 오류가 날 수 있다. 그러므로 relative를 사용할때는 신중하게 해야할 필요가 있다.

 

 

 

2. absolute

부모요소 기준(위치상 부모)으로 위치가 이루어진다.

 

 

absolute의 문제점1

<div class="grand-parent">
  <div class="parent">
    <div class="child">1</div>
    <div class="child absolute">2</div>
    <div class="child">3</div>
  </div>
</div>

.grand-parent{
  width: 400px;
  height: 300px;
  padding: 30px 100px 100px 30px;
  border: 4px dashed lightgray;
}
.parent{
  width: 400px;
  height: 300px;
  border: 4px dashed gray;
}
.child {
  width: 120px;
  height: 80px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute{
  position: absolute;

}

눈에 보이지 않는 3번 박스

3번째 박스가 보이지 않는 현상이 생긴다. 이것은 2번박스가 부모요소가 되면서 3번박스는 2번박스(부모요소)밑으로 들어가졌기 때문에, 3번박스는 2번박스 뒤에 있게 된다.

 

 

absolute의 문제점2

.grand-parent{
  width: 400px;
  height: 300px;
  padding: 30px 100px 100px 30px;
  border: 4px dashed lightgray;
}
.parent{
  width: 400px;
  height: 300px;
  border: 4px dashed gray;
}
.child {
  width: 120px;
  height: 80px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute{
  position: absolute;
  top: 50px;
  left: 100px;
}

부모요소를 찾지 못함

.absolute는 부모요소를 찾지못해서 .parent기준에서 50px, 100px만큼 떨어진것이 아닌, grand-parent기준에서 떨어진 위치가 출력이된다. 이를 수정하기위해서 .parent에 position: relative기능을 추가하면 된다.

 

.grand-parent{
  width: 400px;
  height: 300px;
  padding: 30px 100px 100px 30px;
  border: 4px dashed lightgray;
}
.parent{
  width: 400px;
  height: 300px;
  border: 4px dashed gray;
  position: relative;
}
.child {
  width: 120px;
  height: 80px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute{
  position: absolute;
  top: 50px;
  left: 100px;
}

부모요소를 찾음

**주의! static을 부모요소 기준으로 잡지 못한다. 그러므로 부모요소로 지정하고 싶으면 static을 사용하면 안된다.

 

 

3. fixed

브라우저 뷰포트 기준으로 한곳에 고정시키고 싶을 때 사용한다.

.absolute{
  position: fixed;
  bottom: 50px;
  right: 100px;
}

즉, 뷰포트가 커지거나 줄어들어도 위치가 변하지 않게 된다. (부모요소에 position이 없을 경우에)

 

 

 

4. sticky

스크롤 영역 기준으로 배치

.box {
    position: sticky;
    top: 0;
 }

top, bottom, left, right 이거중에 한개이상 값은 존재해야 한다.

IE 지원 불가

 

.container{
  width: 400px;
  height: 400px;
  border: 4px solid red;
  overflow: auto;
  margin:50px;
}

.section{
  height: 200px;
  border:4px dashed lightgray;
}

.section h1{
  text-align: center;
  line-height: 2;
  font-size: 24px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

sticky속성이 지정된 태그는 스크롤을 내릴때 화면 상단에 고정되어서 내려오는걸 확인 할 수 있다.