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.

Solution

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;
}

Comments

[Gundon]

Thanks for your answer! This indeed, resolves the examples issue. But it won't work if you do not know all dimensions.. Lets say #three should be ´left: 0´ and ´right: 0´. This does not help then, does it?

[Gundon]

Youre reading it wrong. The containing block is the fallback, not prioritized check. You can also see this when removing the transforms from #two. Then #three will be positioned to #one

[Josh Crozier]

@Gundon I figured out a work-around actually... codepen.io/anon/pen/yyxRza

[Gundon]

Great idea! Mind sharing that as an answer? I'll tick it as answering then (:

[maioman]

I'm sure that two has position:static cause I checked dev-tools (also check adding a property like left:33px -> it doesn't react) ,since #three is nested in # two that's where absolute positioning is being calculated from