will moving the element using transform: translate property overlap the other elements which come in its way?

Question

In the CSS code, .two overlaps .one in the output. If we remove the translate property on .two, we can see in the output that .one overlaps .two because it has a translate property.

Similarly if I add div .three with translate property such that it moves towards .one and .two, it would again overlap whatever element it comes across.

How does the stacking order work in such cases?

div {
  width: 150px;
  height: 150px;
  display: inline-block;
}

.one {
  background: red;
  transform: translateX(50%);
}

.two {
  background: green;
  transform: translateY(-30px);
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>