0

所以我有这个网页模板，我想为学校的一个班级复制它。网页的一部分包括我使用 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;
}

而且我知道幻灯片右侧有额外的空间。那是因为为了简单起见，我删除了幻灯片旁边的按钮以获得帮助。非常感谢您提供的任何帮助！如果还需要什么请告诉我...

4

1 回答 1

0

尝试给你的按钮位置：相对。z-index 不影响没有位置的元素

于 2013-08-07T20:49:05.910 回答