[Resolved] z-index not working

[Kev]

Hi there,

I’m trying to implement a button on my site that has a “shadow” underneath it – it’s not actually a shadow, it’s making use of the :after pseudo element to add a coloured block underneath. Here’s my CSS:

.reply-button {
  background-color: var(--bg);
  border: 2px solid var(--text);
  text-decoration: none;
  padding: 10px 30px;
  font-weight: bold;
  font-size: 30px;
  position: relative;
  color: var(--text);
}

.reply-button:after{
  content: '';
  position: absolute;
  background-color: var(--text);
  top:8px;
  left:8px;
  right:-8px;
  bottom:-8px;
  z-index: -1;
}

Problem is, when I set the z-index to -1 the backgound goes behind the body, so it’s not visible. I’ve tried setting .reply-button to 2 and the :after to 1, but this just ends with the background being on top. What am I doing wrong here? This css worked fine with another theme.

Thanks,

Kev

[Fernando]

Hi Kev,

To have a better understanding of the issue, may you kindly provide the link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon. 🙂

[Kev]

Sure, private info attached.

[Fernando]

Thank you for adding the link to your site!

You’ll need to add a relative positioning and a z-index of 1 to the parent element to make it appear.

You may try adding this CSS for instance in Appearance > Customize > Additional CSS:

.gb-button-wrapper.gb-button-wrapper-913e6f26 {
    position:relative;
    z-index: 1;
}

Hope this clarifies. 🙂

[Kev]

Doh! Make the z-index of the button wrapper one higher…fresh pair of eyes and all that. Thanks Fernando, that worked perfectly.

[Fernando]

You’re welcome Kev! Glad that worked! 🙂

[Author]

Posts