Lance B Lance B - 1 year ago 44
jQuery Question

How do I set an image in front of the banner?

I have a banner that is fixed on the bottom of my website. I wanted to add a picture of a book on the top of the banner. So I placed the image in a div outside of the

, called
. Everything is fine, except the book is still behind the banner. I need the book in front of the banner. I tried z-index but it did not place the image in front. So how do I get the image to be in front?

.fixed-footer-wrapper2 {
left: 0px;
right: 0px;
bottom: 0px;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: -50px;
display: -ms-flexbox;
position: fixed;
-ms-flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;

Answer Source

Setting .fixed-footer-wrapper to z-index: -1; should work. That will set that class below everything else in terms of positioning.


.fixed-footer-wrapper {
    z-index: -1;

Now your image is transparent so that might make it look a bit strange but that should work.