导航与其他div之上的背景

Question

我的页面顶部有一个导航，导航下面有一个div。我的HTML是这样的：

<nav>
    <ul>
        <li>About</li>
        <li>Stop motion</li>
        <li>Contact</li>
        <li><a href="facebook.com"><img src="images/fb.png" alt="facebook"></a></li>
        <li><a href="twitter.com"><img src="images/twitter.png" alt="twitter"></a></li>
    </ul>
</nav>
<div id="stop_motion">
    <h2>Stop Motion Film: Het varken</h2>
    <iframe width="560" height="315" 
        src="//www.youtube.com/embed/lGMWS7K_4Nk?rel=0" frameborder="0" allowfullscreen>
    </iframe>
</div>

现在我的CSS就像这样：

nav{
    background: url(../images/navigation.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    height:210px;
    padding:10px;
    z-index:999;
}
    nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
        nav ul li{
            display:inline;
            font-family: 'ralewaysemibold';
            font-size:24px;
        }
            nav ul li img{
                width:36px;
                height:36px;
            }

#stop_motion
{
    background: url(../images/bg_stop_motion.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    z-index: -999;
    min-height: 100%;
    width: 100%;
    height: auto;

    padding-top:150px;
    z-index:-1;
}

现在的样子：

但我希望在第一个导航下有第二个div。不是整个100％的高度，而是100px。我试过添加margin-bottom：-110px;到导航但我得到这样的结果：

第二个是div就在第一个之上，它应该是另一种方式。我该如何解决这个问题？

更新

我已经像这样更新了我的CSS：

nav{
    background: url(../images/navigation.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    height:210px;
    padding:10px;
    z-index:100;
    position:absolute;
    left:0px;right:0px;
}

#stop_motion
{
    background: url(../images/bg_stop_motion.jpg) no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    z-index: -1;
    min-height: 100%;
    height: 100%;
    width: 100%;
}

但现在我得到这样的东西：

我也把它online放在一起，这样就更容易了。 （http://beachteamvandenbroecke-engels.be/）

最终结果应如下所示：

Answer 1

第二个div可以有这个标记：

{
 position: absolute;
 top: 210px; /*height of your nav*/
 left: 50%;
 margin-left: -50px ; /* half of the div's width, must be a negative value. This is for centering purposes*/
 width: 100px;
 z-index: 100 /* more than the background's z-index*/
 }

让我知道它是否有效

Answer 2

根据你的问题，我知道你想要第二个div -under-第一个。您的代码显示：

#stop_motion {
    z-index: -999;
}

如何将其更改为

#stop_motion {
    z-index: 998;
}

这会使它超越第一个

Answer 3

你可以给第二个div一个绝对位置，顶部为100px，z指数高于第一个。

Answer 4

.nav更改css

.nav{
    height:210px;
    padding:10px;
    z-index:100; /* higher z-index */
    position:absolute; /* to remove the nav from the flow of elements */
    left:0px;right:0px; /* to make the nav full width*/
} 

将#stop_motion的css更改为此

#stop_motion {
    margin-top:230px; /* to bring the container below the nav, (is height of nav + top and bottom padding for nav) */
    z-index: -1; /* lower z-index*/
    min-height: 100%;
    width: 100%;
}

Demo

---

为了回应您的更新，我可以看到两个问题，

nav{
    background: url(../images/navigation.jpg) no-repeat; 
    /*..more code..*/
}

第一。要删除导航周围的白色背景，请使用Photoshop等图像编辑软件将背景图像转换为透明度为png或gif。

第二。由于nav现在是position:absolute;，因此它不在常规文档结构的流程中，因此它后面的元素将从它下面开始，为了调整你必须设置它的margin-top或{ {1}}。

padding-top

或

#stop_motion {
    margin-top:230px; /* to bring the container below the nav, (is height of nav + top and bottom padding for nav) */
    /*..more code..*/
}

正如我从您提供的结果的示例图像中看到的，使用#stop_motion { padding-top:230px; /* to bring the container below the nav, (is height of nav + top and bottom padding for nav) */ /*..more code..*/ } 更合适。

jsfiddle Demo
在线图片编辑器pixlr.com

Answer 5

如果要使用z-indexes，则必须定位元素（position: relative/absolute/fixed）。

当元素具有默认值position: static时，将忽略z索引。