Question

嘿伙计我已经根据我的规范设置了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;
}

提前致谢亚当

Answer 1

将它加载到js fiddler上，似乎有效：

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

正如@Reporter所说，很难知道你在做什么没有任何来源。我只是玩了一个傻瓜，我能够坐在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＆amp; CSS不是真正的javascript，所以不确定你希望如何实现它。您可以使用jquery

动态注入“overlay”

Nivo Slider在顶部添加徽标

1 个答案: