0

嗨，我有一些 css3 和 html5，它们在记事本上显示一些文本，后面的页面请参见http://www.sich.co.uk/test/index.html。

问题似乎出在 z-index 上，应该通过在文章标签中输入高 z-index no 来解决，但是如果我在测试页面上这样做，它会失败。所以在测试代码中我只要放一个 z-index: 2; 例如在文章中它失败了。把它拿出来，它工作得很好。

在文章标签中 z-index:2; 已经在简单地用 firebug 删除以查看它的外观。

我一直在用头撞这块砖墙。任何帮助，将不胜感激。我已经包含了源 html，然后是 CSS。

任何想法将不胜感激。

难倒

保罗

HTML

<!doctype html>
<html>
<head>
    <title>Journal</title>
    <link href='http://fonts.googleapis.com/css?family=Patrick+Hand' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<article>
    <h1>Journal Entry #2</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit.
    </p>
</article>

<script src="http://localhost:35729/livereload.js"></script>


</html>

CSS

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;
}
4

2 回答 2

0

我不确定这是否是您要查找的内容，但是如果您<div style="z-index: 2;">立即将其添加为 的子项<article contenteditable>，则它可能就是您要查找的内容。</div>（并在之前添加关闭</article>。）

于 2012-06-19T03:35:47.517 回答
0

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

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

和下面的CSS

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

}

请参阅我的 WordPress主页以了解它的实际应用。

于 2012-06-22T04:21:36.410 回答