CSS transform, push/pull surrounding elements - css

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

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

Answer 2

You can use a negative big value in margin-bottom to pull the other elements:
body {
text-align: center;
}
.test, .element {
width: 80%;
padding: 60px 0;
background: green;
display: inline-block;
}
.element {
width: 30%;
background: yellow;
display: inline-block;
transform: translateY(-50%);
margin-bottom:-100vh;
}
<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>
<br><br>
<div class="test"></div>

Answer 3

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

Answer 4

You can use the box-shadow properties to solve the your problem otherwise you can use the flex-box or position etc. anyway I gave solution but I'm not sure you want this things or not:)
body {
text-align: center;
}
.test, .element {
width: 80%;
padding: 60px 0;
background: green;
display: inline-block;
}
.element {
width: 30%;
background: yellow;
display: inline-block;
transform: translateY(-50%);
box-shadow:0px 100px yellow;
}
<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>