DIV位于DIV定位之后

Question

这是一个.header类，具有背景图片和标记中的导航。 我想做的是将背景图片与.header分开 ，并将其放置在新的div中 （它将位于导航后面，但保持原样不变），因此我可以添加一些过滤器并对其进行进一步自定义。

<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的第一个孩子，我添加了：

<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;
}

Answer 2

怎么样： http : //jsfiddle.net/Xm5BE/

这是HTML：

<header>    
    <div class="nav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
        </ul>        
    </div>
    <div class="header">This is the header bg div</div>    
</header>

和CSS：

header { background:black ;
    width:100% ;
    height:200px ;
    position:relative ;
}

.header { position:absolute ;
    left:0 ;
    top:0 ;
    width:100% ;
    height:200px ;
    background:blue ;
    z-index:100 ;
}

.nav { width:100% ;
    height:28px ;
    background:yellow ;
    position:relative ;
    top:120px ;
    z-index:500 ;
}

.nav ul { margin-left:0 ;
    padding-left:0 ;
    list-style-type:none ;
    text-align:center ;
}

.nav li { display:inline ;
}

.nav li a { padding:0px 8px ;
    line-height:28px ;
    font-size:14px ;
    font-family:arial ;
}