Html 未应用z索引-即使所有项目都已设置位置

嗨，我有一些css3和html5，它们在记事本上显示一些文本，后面有页面，请参见

这个问题似乎与z-index有关，应该通过在文章标签中输入一个高z-index no来解决，但是如果我在测试页面上这样做，它就会失败。所以在测试代码中只要我放一个z-索引：2；例如，在文章中，它失败了。把它拿出来，它就能完美地工作

在文章中标记z索引：2；已在使用firebug简单删除中，以查看其外观

这一次我的头撞到了砖墙上。任何帮助都将不胜感激。我已经包括了源html和CSS

如有任何想法，将不胜感激

难倒

保罗

HTML

---

我不确定这是否是您正在寻找的，但如果您作为

的孩子立即添加

，它可能就是您正在寻找的。（并在

之前添加结束

）

我们通过删除伪元素并使用以下代码解决了这个问题

<div class="notepad-container">
     <div class="page1"></div>
     <div class="page2"></div>
     <div class="notepad"></div>
     <h2>Our clients will forget what we said, they will forget what we did, but they will always remember how good we made them feel.</h2>
</div>

---

查看我的WordPress，了解它的实际操作。

哇，感谢您的横向思考。我不明白为什么会这样，但确实如此。然而，不幸的是，这并不能解决我在主页上使用代码的问题，因此我最终要实现的是文章：在z-index:1之前和文章：在z-index:1之后；而文章的z-索引为：2；。在测试代码中，如果我将article:before和article:after更改为z-index:1；然后，即使你回答了，它仍然失败。你能用你想弄明白的代码更新你的问题吗？好的，我已经更新了问题和页面上的代码。现在，如果您更改z索引：1；（在文章：之前，文章：之后）到z-索引：-1；它起作用了。但由于代码是现在，它失败了。谢谢你的帮助，凯文。我已经试过了大部分的浏览器，浏览器，火狐

body {
   width: 540px;
   margin: auto;
   font-family: 'Patrick Hand', sans-serif;
   background: #666;
   color: #666;
}

article {
   margin: 50px auto;
   padding: 20px 50px;
   position: relative;
   z-index: 2;               /****** REMOVE THIS z-index to see it working properly *****/ 

   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.15);
   box-shadow: 0 0 10px rgba(0,0,0,.15);
   background: #fcf59b;

   background-image: -webkit-gradient(linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b));
   background: -webkit-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: -moz-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: -o-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: -ms-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: linear-gradient(top, #81cbbc, #fcf59b 2%);

   -webkit-background-size: 100% 40px;
   -moz-background-size: 100% 40px;
   background-size: 100% 40px;
}


article,article:before,article:after {
   -webkit-border-bottom-left-radius: 20px 500px;
   -webkit-border-bottom-right-radius: 500px 30px;
   -webkit-border-top-right-radius: 5px 100px;

   -moz-border-radius-bottomleft: 20 500px;
   -moz-border-radius-bottomright: 500px 30px;
   -moz-border-radius-topright: 5px 100px;


   border-radius-bottomleft: 20 500px;
   border-radius-bottomright: 500px 30px;
   border-radius-topright: 5px 100px;
}

article:after,article:before {
   content: ' ';
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   z-index: 1;
   position: absolute;
}

article:before {
   background: #fcf6a7;

   -webkit-transform: rotate(4deg);
   -moz-transform: rotate(4deg);
   -o-transform: rotate(4deg);
   -ms-transform: rotate(4deg);
   transform: rotate(4deg);
}

article:after {
   background: #fcf7b1;

   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   -o-transform: rotate(-4deg);
   -ms-transform: rotate(-4deg);
   transform: rotate(-4deg);
}

p {
   line-height: 2.5em;
   margin-bottom: 40px;
}

h1 {
   padding-top: 8px;
   margin-bottom: -8px;
}

<div class="notepad-container">
     <div class="page1"></div>
     <div class="page2"></div>
     <div class="notepad"></div>
     <h2>Our clients will forget what we said, they will forget what we did, but they will always remember how good we made them feel.</h2>
</div>

/***********************************************
* Create notepad style box for our text
************************************************/

.notepad-container {
   width: 550px;
   margin: auto;
   margin-bottom:30px;
   margin-top:15px;
   height: 200px;
   position:relative;
   z-index: 0;

}



.notepad, .page1, .page2 {
   width: 550px;
   height:200px;
   position: absolute;
   top:0;
   left:0;

   -webkit-border-bottom-left-radius: 20px 500px;
   -webkit-border-bottom-right-radius: 500px 30px;
   -webkit-border-top-right-radius: 5px 100px;

   -moz-border-radius-bottomleft: 20 500px;
   -moz-border-radius-bottomright: 500px 30px;
   -moz-border-radius-topright: 5px 100px;

   border-radius-bottomleft: 20 500px;
   border-radius-bottomright: 500px 30px;
   border-radius-topright: 5px 100px;


}
.notepad {
   background: #fcf59b;


   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.15);
   box-shadow: 0 0 10px rgba(0,0,0,.15);

   background-image: -webkit-gradient(linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b));
   background: -webkit-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: -moz-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: -o-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: -ms-linear-gradient(top, #81cbbc, #fcf59b 2%);
   background: linear-gradient(top, #81cbbc, #fcf59b 2%);

   -webkit-background-size: 100% 40px;
   -moz-background-size: 100% 40px;
   background-size: 100% 40px;
}


.page1 {
   background: #fcf6a7;
   left: 0;
   top: 0;

   -webkit-transform: rotate(4deg);
   -moz-transform: rotate(4deg);
   -o-transform: rotate(4deg);
   -ms-transform: rotate(4deg);
   transform: rotate(4deg);
   position: absolute;
   z-index: -1;
}

.page2 {
   background: #fcf7b1;


   left: 0;
   top: 0;
   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   -o-transform: rotate(-4deg);
   -ms-transform: rotate(-4deg);
   transform: rotate(-4deg);
   position: absolute;
   z-index: -1;
}


.notepad-container h2 {
   font-family: 'bad script', sans-serif;
   line-height: 1.7em!important;
   margin-bottom: 40px;
   margin-top: 0px;
   font-style:italic;
   position: absolute;
   margin: 0px auto;
   padding: 10px 50px;

   z-index: 2;
   width: 450px;
   height: 250px;
   top:0;
   left:0;

}