A unique feature of my DIV is that it remains fixed at the top of the page as you scroll. This is achieved by setting its position to fixed. However, within this main container, I have another div with a relative position. While the content in the relatively positioned DIV looks good, the absolutely positioned elements inside it disappear behind the fixed div after scrolling.
I attempted using z-index properties to resolve this issue but had no success. You can view the problematic code on JSFiddle: http://jsfiddle.net/c2vqd5fw/
The JavaScript code snippet for achieving the sticky behavior:
$(document).ready(function() {
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var offset = 0;
// Implementation details...
$('.toggle-switch').click(function(){
$(this).children().toggleClass('off');
});
});
});The CSS styles used in the implementation:
.stuff-above{
/* Styles */
}
.stuff-below{
/* Styles */
}
.scroll-wrapper{
width:100%;
}
// More CSS styles...
If you engage with the empty box (when the blue element is hidden), the absolutely positioned content reappears. Any insights or suggestions on how to fix this behavior?