css - DIV定位在DIV后面

Question

This is a .header class with a background image, and navigation in the tag. What I am trying to do is separate the background image from .header and place it in a new div (that will go behind the navigation, but keep the same position as is) so I can add some filters and customise it further.

<style>
.header {
    float: left;
    height: 300px; 
    width: 100%;
    margin-top: 2%;
    -webkit-border-top-left-radius: 6px;  
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    background-image: url(../5898169717_6f4b2a3515_b.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
    background-color: #91918e;
}

.header .nav-header { margin-top: 15px; padding-left: 30px; padding-right: 50px; }
.header .nav-header #navigation {
    float: left;
    position: relative;
}
.header .nav-header #navigation li {
    position: relative;
    list-style: none;
    display: inline-block;
    margin-top: 5px;
}
.header .nav-header #navigation li a {
    padding: 0 inherit;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 2px #242526, 0 0 1em #242526, 0 0 0.2em #242526;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-align: left;
    transition-property: color; 
    transition-duration: 100ms; 
    transition-timing-function: linear; 
    -webkit-transition-property: color; 
    -webkit-transition-duration: 100ms; 
    -webkit-transition-timing-function: ease-out; 
    -moz-transition-property: color; 
    -moz-transition-duration: 100ms; 
    -moz-transition-timing-function: ease-out; 
    -o-transition-property: color; 
    -o-transition-duration: 100ms; 
    -o-transition-timing-function: ease-out; 
    -ms-transition-property: color; 
    -ms-transition-duration: 100ms; 
    -ms-transition-timing-function: ease-out;
}
.header .nav-header #navigation li a:last-child {}
.header .nav-header #navigation li:hover .main { color: #f0b92d;}
/**   Dropdown   **/
.header .nav-header #navigation li .sub-nav-wrapper {
    display: block;
    position: absolute;
    z-index: 30;
    margin-left: -16px;
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav {
    width: 150px;
    margin-top: 10px;
    background: white;
    border-top: 1px solid #91918e;
    box-shadow: 0 1px 2px #91918e;
    -moz-box-shadow: 0 1px 2px #91918e;
    -webkit-box-shadow: 0 1px 2px #91918e;
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav:first-child { border: none;  }
.header .nav-header #navigation li:hover .sub-nav-wrapper { display: block; }
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    border-bottom: 1px solid #91918e;
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li:last-child { border: none; }
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li a {
    display: block;
    color: #242526;
    text-decoration: none;
    text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
    padding: 11px 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
    -moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
    -webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}
.header .nav-header #navigation li .sub-nav-wrapper .sub-nav li:hover {
    background: #dcdbd2;
}
.header .nav-header a, #navigation li .sub-nav-wrapper .sub-nav li { }
.header .nav-header #navigation li .sub-nav-wrapper {
    pointer-events: none;
    opacity: 0;
    filter: alpha(opacity=0);
    top: 0;
}
.header .nav-header #navigation li:hover .sub-nav-wrapper {
    pointer-events: auto;
    opacity: 1;
    filter: alpha(opacity=100);
    top: 15px;
}
</style>

<section class="header">

<nav class="nav-header">

    <ul id="navigation">

    <li>
        <a href="index.html" class="main">Home</a>
    </li>

    <li>
        <a href="#" class="main">Portfolio</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Graphics</a></li>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
        </ul></div>
    </li>

    <li>
      <a href="#" class="main">Services</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Content Writing</a></li>
        </ul></div>
    </li>

    <li>
      <a href="#" class="main">Technology</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Wordpress</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">Oracle</a></li>
        </ul></div>
    </li>

    <li>
      <a href="#" class="main">About</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Location</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Awards</a></li>
        </ul></div>
    </li>

    <li>
      <a href="#" class="main">Contact</a>
    </li>

</ul>
</nav>

</section>

Answer 1

您将需要使用 z-index: -1 向 .header 元素添加一个子元素，并确保 .header 具有 CSS position: relative;

---

这是一个有效的 jsfiddle您的代码以您想要的方式工作。

---

在你的标记中，作为 .header 的第一个 child ，我添加了:

<div class="inner-header"></div>

对于您的 CSS，我在底部添加了:

.header {
    background-image: none;
    background-color: transparent;
    position: relative;
}

.inner-header {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/7d/Haeckel_Siphoneae.jpg');
    background-size: 100% auto;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}