I have a design layout similar to this (a small snippet) and I am facing an issue where the text within .content is not clickable. The positioning of #gradient is fixed due to the background image, and #empty has an absolute position to cover the entire body and allow for scrolling with dynamically set height using jQuery.
Any assistance would be greatly appreciated.
#empty {
background-color: rgba(99,115,99,0.25);
margin-top: 200px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#gradient {
background: rgba(255,255,255,0);
background: -moz-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: -webkit-gradient(radial, 50% 65% 50% 65%, 0px, 50% 65% 50% 65%, 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.50)));
background: -webkit-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: -o-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: -ms-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: radial-gradient(ellipse at 50% 65%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=1 );
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content {
color: #000;
margin-top: 200px;
}<div class="container content" role="main">
<div class="row">
<p class="col-md-6">
Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit.
</p>
</div>
</div> <!-- /container -->
<div id="gradient"></div>
<div id="empty"></div>