I'm having a problem with with positioning elements on top of each other.Here is my markup:\[code\]<div id="glownySlajder"> <ul> <li> <img src="http://stackoverflow.com/questions/12761992/inc/img/slajder_bg.jpg" alt="Slajd" class="slajd"> <div class="fr"> <a href="http://stackoverflow.com/questions/12761992/#" class="przyciskPoprzednia fl" title="Poprzednia"><img src="http://stackoverflow.com/questions/12761992/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="http://stackoverflow.com/questions/12761992/#" class="przyciskNastepna fr" title="Nast?pna"><img src="http://stackoverflow.com/questions/12761992/inc/img/strzalka_prawo.png" alt="strzalka_prawo"></a> </div> </li> </ul> </div>\[/code\]Here is my css:\[code\]#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;}\[/code\]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 \[code\]div\[/code\] with \[code\]p\[/code\], it just disappears under the image, not what I want exactly.I am unable to work this out on my own, any tips please?