Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected.
In my attempt to resolve this issue, I have experimented with adjusting the z-index values for both the active and non-active links in the CSS. Unfortunately, my efforts have not yielded the desired outcome. The background of the active tab should cover the image, but it remains positioned behind it.
Below is the snippet of relevant code:
<div class="container d-flex justify-content-center mt-20">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12 mb-5">
<div class="tab-vertical"&...
I have attempted to tweak the z-index values within the stylesheet for both active and non-active links, yet the active tab still fails to display on top of the image within the vertical tabs layout.
If anyone could provide insights into why the active tab isn't appearing above the image in this particular tab setup, I would greatly appreciate the assistance. Perhaps there are additional considerations or alternative approaches that I should consider?
Your help in resolving this matter would be highly valued. Thank you sincerely!