This is my first Question on StackOverflow.
I'm building a simple website for our neighbors. Now I came to a point where googling doesn't help any more.
Please Help!!!
I have a problem with overlapping / intersecting elements. The weird part is that a .png image 'cuts through' two properties of the same div element that happens to be display:table (the image shoves itself in between background-color and border AND does it in the weirdest way: the white font covers the border, while its brown background sits behind the black border) How is this even possible? Image and div overlap like they're interlocked (picture your index and middle fingers of each hand forming interlocked Vs). 1(top): white font in image; 2: black border of div; 3:background color of image; 4(bottom): background-color of div.
My head explodes. What is going on here and how can I make the image find its right place (behind the whitish background-color of a text box)?
I already tried playing with the z-indices but that didn't seem to help.
<div class="ul_wrap ul_bottom">
<ul>You can Choose between these Complementing Treats:<br><br>
<li>» Coffee-Enriched Scrub</li>
<li>» Skin Whitening Scrub</li>
<li>» Exfoliating Sea Salts</li>
<li>» Essential Oils (Lavender etc.)</li>
</ul>
</div>
The .ul-wrap element is styled with the above-mentioned border / background:
position: relative;
height: 100%;
right: 0;
left: 0;
margin: 0 auto;
display: table;
background-color: rgba(255,255,255,0.4);
border: 1px solid black;
border-radius: 12px;
And more interesting maybe, the z-index:10000 setting for some reason shows with a strikethrough (inactive) and z-index:auto in 'computed style' in Google dev tools (inspect element) ...
The image that messes with it is a simple PNG:
<div class="hover_pic_holder">
<img class="hover_pic" src="img/hover_close.png" />
</div>
with .hover_pic_holder and .hover_pic styled in the following way:
.hover_pic_holder {position:fixed;left:20px; width:5%; height:100%;top:25%;z-index: 10;}
.hover_pic_holder img {position:absolute;margin-top:0 auto; margin-top:0 auto;left:-16px; vertical-
align:center;}
.hover_pic {width:80px;}
Ahh I can now add a file:
Thank you!