How can I get this JavaScript highlight span to appear between the footer background and the elements that are in the footer?
Increasing the z-index of the elements does not seem to accomplish this.
Example one - the highlight appears behind the footer with a partially transparent background.
https://codepen.io/jklemon17/pen/KoydPy
.footer {
background-color: rgba(70, 70, 70, .5);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 50px;
padding-bottom:100px;
/* z-index: -2; */
}
Example two - the highlight appears on top of the footer elements.
https://codepen.io/jklemon17/pen/xWPGBm
.footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
padding-top: 50px;
padding-bottom:100px;
z-index: -2;
}
Thanks!
In this case the best would be append the highlighting element to the footer instead the body, that way the z-index would be easier to handle. Change to this on your code:
const footer =
document.querySelector('.footer');
highlight.classList.add('highlight');
footer.append(highlight);