Z-index not working

[bansalsohil]

I m unable to bring a fixed button on top. I have used following code:

.shop_now{
  background-color: #F7F7F7;
  border-top: 1px solid #BFBFBF;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index:  9999999900000;
  padding: 10px;
}

It appears on homepage but get’s behind the images on scrolling.

[basanta]

Hi There,

Can you send us your website URL so that we can have a look.

Thanks

[bansalsohil]

www.greyy.co

At present, I have removed the code as it was non-functioning.

[kory]

@bansalsohil, we need to see a live URL with the code added to the element you’re trying to apply the styles to so that we can provide feedback. Without seeing it live there isn’t really any direction we can provide. Let us know when you have a live example with the code present for us to take a look at. Thanks!

[bansalsohil]

Hi!

Kindly please check the mobile layout of our website (www.greyy.co) and you will notice the problems with the fixed “Shop Now” button. It does not show up above the other sections.

Thanks!

[lely]

Hi There,

Thank you for the URL. The issue here is a general idea of stacking content related to child and root element. From that URL, let’s apply it on your content:

Shop button, and header Do everything better are children of the same section, so stacking of those elements is completely resolved within that section. This means, the CSS for shop button will only work in relation to it’s sibling element header. Once stacking and rendering within that section is completed, the whole section with that shop button element is passed for stacking in the root element with respect to its sibling’s section. This issue happens because the lowest one down at the same hierarchy level appears on top. It’s like by default since sections are siblings, section 4 will be on top of section 3 which will be on top of section 2 that is on top of section 1.

So, if you want that button to be on top of all other content, we have the following option:

1.) Add the button element at the last section of the page.
Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning. So it is like, the last section is on top of the previous section.
2.) Add the button using Convertplus infobar: See sample here: https://www.convertplug.com/plus/demos/info-bar-bottom/1. It will be on top of everything including footer.

To understand better please check the following:

z-index | CSS-Tricks

The stacking context

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Hope this helps.

[bansalsohil]

Thank you! That was pretty helpful.

I tried the option-1. However, the button doesn’t appear on top of the footer. Any solution for that via option 1?

[lely]

Hi There,

I can see you have now added it on the footer. There is a setting for Z-index value on footer bar. It will be on top of the section container because it has no Z-index settings attached to it.Now since you want it on top of everything, remained adding it on footer or, use option 2 as suggested. Try to inspect element to see DOM structure where section is and where footer bar is. They are not sibling. That is why option 2 is best.

Hope this helps.