こんにちは、http://www.sich.co.uk/test/index.html を参照してください。
問題は z-index にあるようで、article タグに高い 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;
}