如何讓div重疊div,不受到彼此的干擾?

  • 34466
  • 0
  • CSS
  • 2015-04-30

如何讓div重疊div,不受到彼此的干擾?

製作圖片切換的效果時,

發生了圖片上方的Logo圖跟著其他圖片效果一起切換或重疊的囧狀。

該問題是因為,在圖片切換的時候,通常是採用淡入淡出效果,

讓視覺上感覺是圖片自己切換,

因此,當淡入的時候,才會蓋到上方的其他圖片,

這時候,將上方的其他圖片在CSS的地方加上

z-index: 200;

z-index的值必須比圖片CSS的z-index的值還要大,

這樣在切換圖片的時候,就不會再影響到顯示了。

----------------------------------------------------------------------------------------------

範例:

CSS代碼如下:

.abgne-player {
position:relative;
width: 463px;
height: 249px;
z-index: 1;
}
.abgne-control {
float: right;
position: relative;
margin-top: -25px;
z-index: 200;
}
 
-----------------------------------------------------------
HTML代碼如下:
 
<div id="abgne-block">
    <div class="abgne-player">
        <ul class="abgne-list">
            <li><a href="#"><img src="images/a.jpg"></a></li>
        </ul>
    </div>
    <div class="abgne-control">
        <ul class="arrows"> 
            <li><a href="#"><img src="images/b.jpg"></a></li> 
        </ul>
    </div>
</div>

 

 

 

參考或是複製語法時,別忘了留個言喔 ^ ^ ~