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

Question

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 1

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.

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

Sign up