CSS) position 특징 - 요소 쌓임 순서

1) 요소 쌓임 순서(Stack order)

요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(z축)

1. static을 제외한 position속성의 값이 있을 경우 가장 위에 샇임(값은 무관)
2. position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임
3. position속성의 값이 있고, z-index속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))

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

1. 기본적으로 마지막에 생성된 요소가 가장 위에 보인다.

html

<div class="box-group">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>

css

.box-group {
  display: flex;
}
.box-group .box {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -30px;
  box-shadow: 0 0 10px rgb(255, 0, 0, .7); 
}
.box-group .box:nth-child(2n) {
  margin-top: 30px;
}
.box1{
  
}
.box2{
  
}
.box3{
  
}
.box4{
  
}
.box5{
  
}

1. 기본적으로 마지막에 생성된 요소가 가장 위에 보인다.html

<div class="box-group">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>

css

.box-group {
  display: flex;
}
.box-group .box {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -30px;
  box-shadow: 0 0 10px rgb(255, 0, 0, .7); 
}
.box-group .box:nth-child(2n) {
  margin-top: 30px;
}
.box1{
  
}
.box2{
  
}
.box3{
  
}
.box4{
  
}
.box5{
  
}

출력결과

 

2. position:relative추가 후 쌓임 순서

html

<div class="box-group">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>

css

.box-group {
  display: flex;
}
.box-group .box {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -30px;
  box-shadow: 0 0 10px rgb(255, 0, 0, .7); 
}
.box-group .box:nth-child(2n) {
  margin-top: 30px;
}
.box1{
  
}
.box2{
  
}
.box3{
  position: relative;
}
.box4{
  position: relative;
}
.box5{
  
}

출력결과

3번, 4번에 position을 추가 -> 4번이 5번과 3번보다 위에 쌓임을 확인

※ position의 속성이 있다면 속성이 없는 요소보다 무조건 위에 쌓이게 된다. 만약 position의 속성이 둘다 있다면 가장 늦게생성된 요소가 가장 위에 쌓인다.

3. position:relative추가, z-index: 1; 추가 후 쌓임 순서html

<div class="box-group">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>

css

.box-group {
  display: flex;
}
.box-group .box {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -30px;
  box-shadow: 0 0 10px rgb(255, 0, 0, .7); 
}
.box-group .box:nth-child(2n) {
  margin-top: 30px;
}
.box1{
  position: relative;
}
.box2{
  position: relative;
}
.box3{
  position: relative;
  z-index: 2;
}
.box4{
  position: relative;
  z-index: 1;
}
.box5{
  position: relative;
}

출력결과

※ z-index: 0; 기본값. z-index: 0~2147483647 브라우저별로 상이함.
position의 속성이 있을 경우에만 z-index가 동작함.

z-index의 값이 높을 경우에 더 위에 쌓이게 된다. 만약에 z-index의 값이 같다면 당연히 나중에 생성된 요소가 더 위에 쌓이게 된다.