所以我有这个网页模板，我想为学校的一个班级复制它。网页的一部分包括我使用 WOWSlider 制作的幻灯片，并且我在幻灯片顶部有我需要的文本。但由于某种原因，即使在尝试使用 z-index 修复它之后，该按钮仍会继续留在幻灯片后面。如果我用图像替换幻灯片，则会显示该按钮。但它不喜欢滑块。下面是我的这部分页面的 html 和 css。滑块下方注释掉的部分是我用于文本的图像。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/WOWSlider/engine1/style.css" />
<script type="assets/vendor/WOWSlider/text/javascript" src="engine1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/practiceStyle.css">
<title>Cake Delights</title>
</head>
<body>
<div class="row-fluid">
<div class="homepageSlideshow">
<div class="span8 slideshowAd">
<!--slideshow-->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="assets/images/headerCupcakeAd.jpg" alt="50% off pink frosted cupcakes!" id="wows1_0"/>
</li>
<li><img src="assets/images/bannerRainbowCake.jpg" alt="Rainbow cake" title="bannerRainbowCake" id="wows1_1"/>
</li>
<li><img src="assets/images/bannerIceCreamSandwichCake.jpg" alt="Ice Cream Sandwich Cake" id="wows1_2"/>
</li>
<li><img src="assets/images/bannerCookies.jpg" alt="Cookies" id="wows1_3"/>
</li>
<li><img src="assets/images/bannerCakePops.jpg" alt="Cake Pops" id="wows1_4"/>
</li>
</ul>
</div>
<span class="wsl"><a href="http://wowslider.com">Gallery Script</a> by WOWSlider.com v4.2</span>
<div class="ws_shadow"></div>
</div>
<!--End slideshow-->
<!--img src="assets/images/headerCupcakeAd.jpg" class="span8 slideshowAd"/-->
<h3>Wedding Cupcakes</h3>
<span>the newest craze in town</span>
<button class="orderNowHome" type="button">
order now
</button>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="assets/vendor/WOWSlider/engine1/wowslider.js"></script>
<script type="text/javascript" src="assets/vendor/WOWSlider/engine1/script.js"></script>
<script type="text/javascript" src="js/retina.js"></script>
</body>
和 CSS
h3 {
color: #6f3f52;
font-size: 2.7em;
font-family: Arial, Helvetica, sans-serif;
}
.row-fluid {
width: 960px;
margin: 0 auto;
}
.homepageSlideshow {
background: #a96580;
height: 360px;
}
.span8.slideshowAd h3 {
background: rgba(255, 255, 255, .5);
width: 608px;
height: 80px;
position: absolute;
top: 250px;
padding-left: 15px;
padding-top: 10px;
z-index: 100;
}
.ws_images li{
overflow:hidden;
padding-right: -5px;
}
.span8.slideshowAd span {
color: #c288a0;
font-size: 1.9em;
position: absolute;
top: 300px;
margin-left: 20px;
z-index: 101;
}
.span8.slideshowAd button {
float: right;
margin-right: 50px;
margin-top: -80px;
border-radius: 5px;
color: #64394a;
font-size: 2em;
padding: 10px 20px 10px 20px;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
border: 1px solid #a96580;
border-radius: 8px;
z-index: 102;
background: #fcacb5; /* Old browsers */
background: -moz-linear-gradient(top, #fcacb5 0%, #fee7ea 76%, #fee7ea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcacb5), color-stop(76%,#fee7ea), color-stop(100%,#fee7ea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcacb5', endColorstr='#fee7ea',GradientType=0 ); /* IE6-9 */
}
.span8.slideshowAd img {
float: right;
margin: 10px;
width: 646px;
}
而且我知道幻灯片右侧有额外的空间。那是因为为了简单起见，我删除了幻灯片旁边的按钮以获得帮助。非常感谢您提供的任何帮助！如果还需要什么请告诉我...