Content remains behind :before Div overlay in IE - html

Question

I am struggling with this overlay. On the prod site the :before element overlays a div with a full image bg. When viewing the site in Chrome and Firefox the content is displayed above the overlay as intended. However, when viewing the content in IE11 the :before element overlays everything in that parent div.
I would like the result in Chrome to be the same in IE.
Ex. Overlay above image, text/content on top of the overlay.
See: JSFiddle
.foreverCTA:before {
content: "";
width: 100%;
height: 900px;
background: #2f71a9;
background: -webkit-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: -o-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: -moz-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: radial-gradient(circle, transparent -25%, #2f71a9 81%);
position: absolute;
left: 0;
}
.foreverCTA {
color: #fff;
/*display: flex;*/
background: #fff url("images/2015APR06_RAYSBASEBALL_MFPB6240s.jpg") no-repeat center;
background-size: cover;
height: 900px;
/*justify-content: center;
flex-wrap: wrap;
align-items: center;*/
}
.foreverCTA p,
.foreverCTA h2,
.foreverCTA h4 {
color: #fff!important;
}
.foreverCTA li,
.foreverCTA ul {
list-style: none;
padding: 0;
}
.foreverCTA p,
.foreverCTA h3,
.foreverCTA h2,
.foreverCTA li {
-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .4));
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .4));
}
.ion-ios-baseball {
margin: 3px;
padding-top: 10px;
font-size: 2em;
vertical-align: center;
}
.foreverGame {
margin-top: 50px;
}
.foreverHeader {
padding-top: 50px;
/*-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
-o-flex: 1 1 100%;
flex: 1 1 100%;
z-index: 999;*/
}
.waysToBuy {
margin: 50px 0;
}
.buyDetails {
min-height: 210px;
text-align: center;
}
.foreverHeader h1,
.waysToBuy h1 {
font-size: 4.5em;
color: #ECDC00!important;
padding: 0!important;
margin: 0;
-webkit-filter: drop-shadow(2px 4px 0px rgba(249, 159, 28, 1));
filter: drop-shadow(2px 4px 0px rgba(249, 159, 28, 1));
}
.foreverHeader h3 {
font-size: 3.5em;
color: #fff!important;
margin: 5px;
}
.foreverBuy {
/*display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;*/
}
.buy1,
.buy2 {
height: 400px;
/*display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
align-items: flex-end;
flex-basis: 20%;*/
}
.buyDetails {
/*align-self: flex-start;*/
}
.buyButton {
/*flex-basis: 50%;
align-self: center;*/
vertical-align: bottom;
}
.buy2 a {
color: #ECDC00!important;
}
<div class="foreverCTA">
<div class="row">
<div class="foreverHeader">
<h3>Lorem ipsum<br></h3>
<h1>Lorem ipsum<br></h1>
<h3>Lorem ipsum</h3>
</div>
</div>
<div class="row">
<div class="foreverGame">
<h2>Lorem ipsum</h2>
</div>
<div class="foreverDate">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>

Answer 1

This will do the trick,
check this fiddle here
first remove position:absolute property and add following properties as,
display:block;
margin-bottom:-900px;
so your final CSS will be as follows,
.foreverCTA:before {
content: "";
width: 100%;
height: 900px;
background: #2f71a9;
background: -webkit-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: -o-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: -moz-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: radial-gradient(circle, transparent -25%, #2f71a9 81%);
left: 0;
display:block;
margin-bottom:-900px;
}