z-index問題 - 相對位置

-1

我有一些z-index問題，我似乎無法解決。我確定相關位置屬性是相對的，但我的元素不會很好地發揮。z-index問題 - 相對位置

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<div class="container" id="top"> 
<h1>Top</h1> 
    <div class="slideshow"> 
     <ul class="nav"> 
      <li class="prev"><a href="#">Previous</a></li> 
      <li class="next"><a href="#">Next</a></li> 
     </ul> 

     <ul class="slides" id="slides"> 
      <li><img src="images/top_blue.gif" alt="Harley Davidson Sportster" /></li> 
      <li><img src="images/top_brown.gif" alt="Harley Davidson Sportster" /></li> 
      <li><img src="images/top_vanilla.gif" alt="Harley Davidson Sportster" /></li> 
     </ul> 
    </div> 


</div> 


</body> 
</html>

在這裏，我的CSS：

body, h1, ul, li { 
    margin: 0; padding: 0; border: 0; 
} 

.container { 
    width: 800px; margin: auto; 
    position: relative; 
} 

.slideshow { 
    width: 800px; height: 50px; 
    position: relative; 
} 

.slideshow ul.nav { 
    list-style: none; 
    position: relative; 
    z-index: 100; 
} 
    .slideshow ul.nav li.prev { 
     float: left; 
     } 
    .slideshow ul.nav li.next { 
     float: right; 
    } 
    .slideshow ul.nav li a { 
     display: block; width: 32px; height: 48px; text-indent: -9999px; 
    } 
     .slideshow ul.nav li.prev a { 
      background: url(images/arrow_prev.gif); 
     } 
     .slideshow ul.nav li.next a { 
      background: url(images/arrow_next.gif); 
     } 

    .slideshow ul.slides { 
     list-style: none; 
     position: relative; 
     top:0px; 
     height:50px; 
    }

這裏我的jsfiddle：http://jsfiddle.net/XPsn7/1/

基本上，在各主圖像具有的z-index爲5，箭頭圖像應位於幻燈片的前面，Z指數爲15.但是，導航箭頭會使幻燈片圖像向右移動以騰出空間。發生了什麼事？

來源

2012-11-14 user1570747

問題是你的相對定位。如果您創建一個絕對定位的子元素的相對容器，您應該可以按照預期浮動圖像。

來源

2012-11-14 15:31:16 RhinoWalrus

z-index問題 - 相對位置

回答

相關問題