z-index未应用 - 即使所有项目都设置了位置

时间:2012-06-19 02:57:35

标签: html css z-index

您好我有一些css3和html5在记事本上显示一些文字,后面有http://www.sich.co.uk/test/index.html页。

问题似乎与z-index有关,应该通过在article标签中放入一个高z-index no来解决,但是如果我在测试页面上这样做就会失败。所以在测试代码中我一放一个z-index:2;例如,在文章中它失败了。拿出来,它完美无缺。

在文章标签中,z-index:2;已经只是用萤火虫移除,看看它应该是什么样的。

我一直在用这个砖头撞墙。任何帮助,将不胜感激。我已经包含了源代码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;
}

2 个答案:

答案 0 :(得分:0)

我不确定这是否是您正在寻找的内容,但如果您作为<div style="z-index: 2;">的孩子立即添加<article contenteditable>,则可能是您正在寻找的内容。 (并在</div>之前添加结束</article>。)

答案 1 :(得分: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 homepage,了解它的实际效果。