DIV定位後的DIV

這是一個。標頭類與背景圖像，並在標籤中導航。我所試圖做的是獨立於.header的背景圖像，並將其放置在一個新的DIV（將去導航的背後，卻保持相同的位置是），所以我可以添加一些過濾器並進一步定製它。DIV定位後的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>

來源

2013-04-30 Borsn

你會需要一個孩子添加到.header元素與z-index: -1，並確保.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; 
}

來源

2013-04-30 02:15:30

如何：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 ; 
}

來源

2013-04-30 02:28:37 Cynthia

DIV定位後的DIV

回答

相關問題