[html][css] position요소 쌓임 순서 stack order

어떤 요소가 더 위에 쌓이는지?

1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

2. position이 모두 존재한다면 z-index값이 높을수록 위에 쌓임

3. postion 속성의 값이 있고, z-index 값이 같다면

html의 마지막 코드일 수록 위에 쌓임

 

position> z-index> html마지막 코드

 

<div class="box-group">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.box-group{
  display: flex;
}
.box-group .box{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 30px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -30px;
}
.box-group .box:nth-child(2n){
  margin-top: 30px;
}

가장 늦게 작성된 5번이 가장 위에 있다. 

 

 

그런데 4번 박스에 

postion: relative를 적어놓는다면

4번이 가장 위에 쌓인다.

 

 

 

.box3{
  position: relative;
  z-index:1;
}

box3번에 z-index를 높여주면 3번이 올라간다.

그런데 주의할 점은 position이 있어야한다.