opacity or transform changing the position of element

Question

I was just trying to make two div overlapped over each other using margin negative values...which works fine

Stack Snippet

.main {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: -20px;
}

.item:last-child {
  background: blue;
  margin-top: 20px;
}

<div class="main">
  <div class="item"></div>
  <div class="item"></div>
</div>

---

Now I just added the opacity:0.5 to the first item...something stranged happened. I noticed that applying opacity value less than 1 like 0.99 placing the div to front...

Updated: @Temani_Afif mentioned in the comments applying transform is giving the same effect in the first div

Stack Snippet

.main {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: -20px;
}

.item:last-child {
  background: blue;
  margin-top: 20px;
}

.item:first-child {
  transform: scale(1);
  opacity: .99;
}

<div class="main">
  <div class="item"></div>
  <div class="item"></div>
</div>

I know I can use position and z-index values to place div at front or back...

But I don't understand why applying opacity value less than 1 or or transform to first div is placing it at front...Is this a normal behavior?