Question

HTML：

<div class="entry-wrapper">
<div class="entry-paper"></div>
some content goes here
</div>

CSS：

.entry-wrapper {
    background: white;
    margin: 0 0 1.625em;
    padding: 1.625em;
    position: relative;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.entry-paper {
    background: white;
    height: 100%;
    width: 99%;
    position: absolute;
    left: 2px;
    top: 3px;
    z-index: -1;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

.entry-paper::before, .entry-paper::after {
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    left: 12px;
    bottom: 2px;
    background: red;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    z-index: -1;
}

.entry-paper::after {
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}

我需要将红色块放在.entry-paper块下面。这是链接，伙计们 - http://layot.prestatrend.com/?page_id=2无法弄清楚如何做到这一点。有什么帮助吗？

Answer 1

如果目标是在.entry-wrapper和.entry-paper下面显示红色块：

更改：.entry-paper::至.entry-wrapper:
将.entry-wrapper:before, .entry-wrapper:after的z-index更改为-2（任何小于.entry-paper的z-index的值）
调整.entry-wrapper:before, .entry-wrapper:after的底部值（可能为-3px左右）

jsfiddle demo

修改1：

它似乎没有造成任何伤害，但::和before的{{1}}应更改为after。显然，浏览器忽略了额外的:，但它可能会在某些时候造成麻烦。

css z-index问题（块中的块）

1 个答案: