[英]Z-index not working on img and div with p
我將定位元素放在彼此的頂部時遇到了問題。 這是我的標記:
<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似乎不起作用。 當我嘗試用p
對div
進行負邊距時,它會在圖像下消失,而不是我想要的完全消失。
我無法自己解決這個問題,請給我任何提示?
首先, z-index
僅適用於塊元素( display:block
)。 其次,它僅適用於處於相同堆疊環境中的元素。 第三,不要使用margin
來定位。 使用position:
和top
, left
, right
, bottom
。
參考文獻:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.