Archived topic
z-index not working
5 replies · Started by Kev on May 22, 2022
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
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. :)
Sure, private info attached.
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. :)
Doh! Make the z-index of the button wrapper one higher...fresh pair of eyes and all that. Thanks Fernando, that worked perfectly.
You’re welcome Kev! Glad that worked! :)
