Z-index not working on img and div with p
16,595
First of all, z-index
only works on block elements (display:block
). Second, it is only useful for elements which are in the same stacking context. Third, don't use margin
to position. Use position:
and top
, left
, right
, bottom
for this.
References:
![Michał Lach](https://i.stack.imgur.com/FsCz7.jpg?s=256&g=1)
Comments
-
Michał Lach about 2 years
I'm having a problem with with positioning elements on top of each other. Here is my markup:
<div id="glownySlajder"> <ul> <li> <img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd"> <div class="fr"> <a href="#" class="przyciskPoprzednia fl" title="Poprzednia"><img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo"></a> <p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p> <a href="#" class="przyciskNastepna fr" title="Następna"><img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo"></a> </div> </li> </ul> </div>
Here is my css:
#glownySlajder { margin-bottom: -2px; } #glownySlajder a { margin: 7px; } #glownySlajder ul li img { z-index: 9998; } #glownySlajder div { z-index: 9999; color: black; background-color: #e7e7e7; height: 85px; width: 500px; padding: 0px 5px; } #glownySlajder div p { font-size: 11px; line-height: 14px; margin-top: 20px; width: 390px; } .fr { float: right; } .fl { float: left; }
This is what I get:
This is want I want to achieve:
The problem is that z-index doesn't seem to be working. When I try to do negative margin on a
div
withp
, it just disappears under the image, not what I want exactly.I am unable to work this out on my own, any tips please?
-
adprocas about 8 yearsFor anyone that finds this, another issue that might come up is to do with overflow. Check if you have overflow: hidden; anywhere within your element structure. That's what was causing my issues. I changed it to overflow: visible; and my img layering worked the way I wanted.