z-index - z-indexをdivとセクションで機能させるようにしています

Question

セクションとdivが次々にあります。divを、margin-top：-10pxでセクションの少し下に配置して、border-radiusで作成した丸みを帯びたコーナーを切り取ります。現在、発生するのは上部のセクションが上に移動し、その中のテキストがセクション自体ではなくdivの上部に表示されることだけです。これがjsfiddlehttp : //jsfiddle.net/37PkJ/にあります。基本的に私はオレンジと黒が青の下に落ちることはありません。ありがとう

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-----------------*/
/*-------------------------------------------------*/

Answer 1

私はmastHeaddivで相対位置を設定する必要がありました。単純。