试图让z-index与div和部分一起工作

我有一个部分和div一个接着一个，我想让div稍微低于margin-top部分：-10px到切掉我用边界半径创建的圆角。现在所发生的一切就是顶端部分向上移动，其内部的文本位于div顶部而不是部分本身。这是在jsfiddle http://jsfiddle.net/37PkJ/。基本上我不会让橙色和黑色掉在蓝色的下面。由于试图让z-index与div和部分一起工作

HTML/WordPress的

<?php 
/* 
Template Name:Home 
*/ 
?> 
<?php get_header(); ?> 
    <section id="mastHead"> 
     <div id="navResponsive"> 
      <ul> 
       <li><a href="#about">about</a></li> 
       <li><a href="#skills">skills</a></li> 
       <li><a href="#contact">contact</a></li> 
       <li><a href="#footer"><i class="icon-twitter"></i></a></li> 
       <li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li> 
      </ul> 
     </div> 
     <div id="nav"> 
      <ul> 
       <li><a href="#about">about</a></li> 
       <li><a href="#skills">skills</a></li> 
       <li><a href="#contact">contact</a></li> 
       <li><a href="#footer"><i class="icon-twitter"></i></a></li> 
       <li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li> 
      </ul> 
     </div> 
    </section> 
    <div id="menu"> 
     <div id="menuCenter"> 
      <a href="toggleMenu"><i class=" icon-reorder"></i></a> 
     </div> 
    </div> 
<?php get_footer(); ?>

CSS

html { 
    font-size: 62.5%; } 

#container { 
    background: aqua; 
    width: 100%; } 

#mastHead li { 
    list-style-type: none; } 

ul { 
    margin: 0; 
    padding: 0; } 

#navResponsive { 
    display: none; } 

#menu { 
    display: none; } 

/*-------------MEDIA QUERIES BITCHES---------------*/ 
/*-------------------------------------------------*/ 
/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-width: 320px) and (max-width: 1024px) { 
    #navResponsive { 
    display: block; 
    background: #44749d; 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; } 
    #navResponsive li { 
     text-align: center; } 
    #navResponsive a { 
     font-size: 3em; } 

    #nav { 
    display: none; } 

    #menu { 
    display: block; 
    width: 50%; 
    background: orange; 
    margin-left: auto; 
    margin-right: auto; } 

    #menuCenter { 
    width: 4.5em; 
    padding: 1em; 
    border-radius: 0.5em; 
    margin-left: auto; 
    margin-right: auto; 
    background: black; } 
    #menuCenter a { 
     text-decoration: none; } 
    #menuCenter i { 
     font-size: 5em; } } 
/*---------------END MEDIA QUERIES-----------------*/ 
/*-------------------------------------------------*/

来源

2012-12-27 Cool Guy Yo

我必须设置位置相对上桅顶格。简单。

来源

2012-12-27 01:58:22

试图让z-index与div和部分一起工作

回答

相关问题