How to suspress the position: relative when using translate

Question

it seems that using transform: translateY(1px); also causes the element to gain an extra position: relative;-behaviour.

Is there a way to suspress this?

Here is a example on codepen.io.

I would like to position the whitebox absolutely to the green one, not the parent (red) one.

Answer 1

One option would be to displace/negate the parent's positioning by wrapping an element around #three (in this case, I added the .displacement element).

Absolutely position this wrapper element, and position it to cover the parent (using top: 0/right: 0/bottom: 0/left: 0). Then displace the element by giving it negative translation values, relative to the parent's.

<div class="displacement">
    <div id="three"></div>
</div>

.displacement {
  -webkit-transform: translateY(-25px) translateX(-25px);
  transform: translateY(-25px) translateX(-25px);
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 200%; height: 200%;
}

In doing so, the element #three is positioned absolutely relative to #one, and the parent #two's translated positioning is effectively displaced.

Updated Example

.displacement {
  -webkit-transform: translateY(-25px) translateX(-25px);
  transform: translateY(-25px) translateX(-25px);
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 200%; height: 200%;
}
#three {
  background-color: white;
  height: 25px;
  width: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
}