z-index不做它应该做的事情？

Question

如果有人能说明如何解决这个问题，那就太好了。 我一直在研究这个问题，尝试各种各样的事情。它开始了一个简单的z-index实验，但由于某种原因，没有我尝试的div不会重叠。 这是一个非常简单的结构，基本上是一个“包装器”和两个相对定位的div，里面有不同的z-index-es。我在这里想念什么？请帮忙！

JSFiddle

HTML：

<section id="wrapper">
  <section id="content">
    &nbsp;
    abcdefg
    abc<br>
    abc<br>
    abc<br>
    abc<br>
  </section>
  <section id="border">
    abcd
  </section>
</section>

CSS：

html{width:100%; height:100%}
    body{
        margin:0px;
        width:100%;
        height:100%;
        background:#bababa;
        }
    #wrapper{
        width:80%;
        margin:0px auto;
        background:yellow;
        border:2px solid green;
        }
   #border{
        position:relative;
        width:100%;
        background:blue;
        z-index: 1;
        }
    #content{
        position:relative;
        width:80%;
        margin:0px auto;
        background:red;
        z-index: 2;
        }