I've been experimenting with placing a div behind another div in the layout of my website. Instead of using "position:absolute," I decided to try negative margins. Everything seemed to be going well until I added some filters.
The div in question has a background image that I want to position behind the main content.
.tshowcase-background-profile {
height:300px;
width:100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-image:url('MY IMAGE');
background-size:cover;
z-index: -50;
}
When I remove the filters, everything works as expected. The div is positioned below the other content. However, once the filters are applied, the div moves on top of the content.
I've noticed that toggling the filter line in Google Chrome Inspector changes the positioning from below the content to above and vice versa.
Why is this happening?
I need to find a way to place a div behind my content with a blurred background without using Absolute position.
Thank you
EDIT : JSFiddle Example of my issue . Try deleting the filters, and click "RUN," you'll see that the Youtube icon will appear on top of the div without filters, and below when filters are applied.