1

嘿伙计们，我已经按照我的规范设置了 Nivo 滑块，但是我想要做的是将我的徽标覆盖在它的顶部。我试过玩 z-index 但无济于事。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

    <div id="header"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
                <img src="images/dog.jpg" alt="" />
                <img src="images/cat.jpg" alt="" />
          </div></div></div><script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

这是我添加的css

#header{
width: 100%;
background-color: #000000;}

#content{
    width:900px;
    background:#0C6;
    color:#cccccc;
    margin-top:-120px;
    float:left;
    z-index:1000;
    margin:0 auto;
}

提前感谢亚当

4

1 回答 1

1

将它加载到 js fiddler 上，它似乎可以工作：

http://jsfiddle.net/zdvPv/1/

正如@Reporter 所说，在没有任何来源的情况下很难知道您在做什么。我刚和 firbug 玩了一场，我能弄到一些东西放在 nivoslider 上。

<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>

这被放置在滑块 div 之外。代码很糟糕，但它只是一个开始让你看看它是否可以工作，你可以用图像替换 div 或者将图像作为 div 的背景。

编辑：我在这个页面上搞砸了萤火虫：http: //nivo.dev7studios.com/无法向您展示形象思维

编辑 2：我的解决方案是 HTML & CSS 而不是真正的 javascript，所以不确定你希望如何实现它。您可以使用 jquery 动态注入“覆盖”

于 2011-11-04T11:39:47.997 回答