我在将元素放置在彼此之上时遇到问题。这是我的标记:
<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>
这是我的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;
}
这就是我得到的:
这是我想要实现的:
问题是 z-index 似乎不起作用。当我尝试在 with 上做负边距时div
,p
它只是消失在图像下,而不是我想要的。
我自己无法解决这个问题,请问有什么建议吗?