Lance B Lance B - 4 months ago 8
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

fixed-footer-wrapper
, called
.fixed-footer-wrapper2
. 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?

https://jsfiddle.net/Lance_Bitner/3gz7wk4m/

.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

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

Example:

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

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

Comments