I have a unique extension that allows me to modify the HTML of websites. One feature I am working on is adding a span tag containing an SVG tag. While it typically works well, there is an occasional issue where the SVG element is hidden underneath the preceding section, as illustrated in this image. https://i.sstatic.net/CvBOo.png
Below is the code snippet related to this problem.
.auto-time-popup-span {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.quick-popup-icon {
position: relative;
margin-left: -5px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
vertical-align: middle;
box-shadow: 0px 4px 12px -2px rgb(128 128 128 / 35%);
border-radius: 50%;
}<span data-value="8 a.m. PT" class="auto-time-popup-span">
<span style="background-color:#f5f7c6;">8 a.m. PT</span>
<svg width="30" class="quick-popup-icon"></svg>
</span>