CSS element positioning trouble - html

Question

I was wondering how can I get the heading element to flow under the slider instead of on top and behind the slider. In other words how can I get the heading or any other element to flow normaly below the slider.
Here is the link to the Jsfiddle https://jsfiddle.net/1kg7s473/
HTML
<form class="sliders">
<input type="radio" name="slider-choice" id="first-slider" checked />
<div class="slider-container">
<div class="slider">
<p>Some Random Text...</p>
</div>
<div class="nav">
<label for="second-slider" class="prev"></label>
<label for="second-slider" class="next"></label>
</div>
</div>
<input type="radio" name="slider-choice" id="second-slider" />
<div class="slider-container">
<div class="slider">
<p>Even Some More Random Text...</p>
</div>
<div class="nav">
<label for="first-slider" class="prev"></label>
<label for="first-slider" class="next"></label>
</div>
</div>
</form>
<h2>Some more random text</h2>
CSS
.sliders {
width: 600px;
position: relative;
}
.sliders input{
display: none;
}
.slider {
position: absolute;
opacity: 0;
width: 600px;
transform: scale(0);
transition: all .6s ease-in-out;
}
.nav label {
margin-top: 65px;
width: 85px;
display: none;
position: absolute;
opacity: 0;
cursor: pointer;
transition: opacity .2s;
color: black;
font-size: 6em;
text-align: center;
background-color: rgba(100, 100, 100, .6);
Z-index: 99999;
}
.sliders:hover .nav label{
opacity: 0.5;
cursor: pointer;
}
.sliders:hover .prev:hover, .sliders:hover .next:hover{
opacity: 1;
}
.nav .next{
right: 0;
}
.prev:before{
content: '\2770';
}
.next:before{
content: '\2771';
}
input:checked + .slider-container .slider{
opacity: 1;
transform: scale(1);
transition: opacity 2s ease-in-out;
}
input:checked + .slider-container .nav label{
display: block;
}
p{
padding: 100px 20px;
width: 560px;
text-align: center;
background: #dae1ef;
}

Answer 1

Put the h2 inside a div like this:
<div class="h2Container" >
<h2>Some more random text</h2>
</div>
Add the following CSS to the class h2Container
.h2Container
{
position: relative; padding-top: 25%;
}
Here is the Demo for the same.

Answer 2

Remove the styles on the .sliderclass and attribute them to the slides container instead with these changes too:
.slider-container {
width: 600px;
position: relative; //do not use absolute on this
top: 0;
height: 235px; //you must have a height defined or 100%
display: inline-block; //this reserves the entire area (width X Height) and automatically places the next element below the defined height
}
See the working DEMO