CSS transform, push/pull surrounding elements

Question

I'n using translateY() to pull an element up to overlap an element above it.

.element {
  transform: translateY(-50%);
}

It leaves space to the bottom. Is there any way to pull up any elements below it?

https://codepen.io/anon/pen/OBYRMe

In the example you can see it overlaps the element on top which is what I want but leaves space on the bottom. I am trying to achieve this without modifying other elements (e.g. use transform on elements on the bottom as well)

Note: using margin -50% does not work because it doesn't bring up the element 50% relative to the element's height. Only transform calculates the height to my knowledge.

Answer 1

Use margin-top: -50%; instead. Happy coding

Answer 2

You can apply transform on elements on bottom using the following css.I hope this is what you are looking for

.element ~ div {
    transform: translateY(-50%);
}