I am in the process of developing a website to compile and organize information for my personal use. Strangely, one of my divs is overlapping with another div even though it has a higher z-index. I suspect that this issue might be related to the hierarchy or parent-child relationship between the elements.
When hovering over either the "Metasploit Suite" or the "Other Exploitation Tools," the "drop-wrapper-cont" div displays as intended. However, there is some unexpected blending, opacity shifting, or overlaying occurring with the .section-wrapper div for Upload/Download.
Below is the relevant HTML code snippet:
body {
background: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0,.85));
margin: 10px;
position: relative;
background-repeat: no-repeat;
height: 100%;
animation: fadeIn 1s ease-in;
}
body * {
overflow-wrap: break-word;
}
(...)
</div><!DOCTYPE html>
<html>
(...)
</div>
</script>
</body>
</html>Despite adjusting the z-index values multiple times and trying different approaches like setting absurd values or experimenting with mix-blend-mode, I have been unable to resolve the issue. It appears that restructuring the HTML may be necessary to prevent the parent elements from interfering with the z-index properties.
UPDATE: Including full HTML/CSS content as adjusting the z-index directly did not produce the desired visual outcome based on the correct solution provided