Question

我试图用伪元素制作纸叠效果.CSS代码是：

.body{background-color: #F5F5F5; height:100%;}    
#content {
        ...
        position: relative;
    ...
    display: block;
}
#content:after,
#content:before {
    display: block;
    height: 100%;
    left: -1px;
    position: absolute;
    width: 100%;
}
#content:after {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    top: 0;
    z-index: -1;
}
#content:before {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
    top: 0;
    z-index: -2;
}

我已经知道转换需要 display：block 。使用此代码，虽然开发人员工具突出显示：之前和：之后元素，但转换并不可见。当我在 #content 元素上添加 z-index：2 时，堆栈是可见的，但是：after元素位于顶部，其中包含z-index：-1。我想这与 .body 有关。是否有办法让这项工作成功？这是fiddle: http://jsfiddle.net/KVsjK/4/

Answer 1

在jsFiddle示例中将z-index从#content移至.container似乎可以正确显示。 jsfiddle

在这个类似的问题上查看第二个答案（有74+票）：Is it possible to set the stacking order of pseudo-elements below their parent element?

需要注意的重要事项：

这个问题的实际答案是你需要使用伪元素在元素的父元素上创建一个新的堆叠上下文（实际上你必须给它一个z-index，而不仅仅是一个位置）。

在MDN进一步阅读：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 2

不确定这是否是您的整个问题，但您需要将content: ''添加到:before和:after元素。

CSS转换Chrome中的可见性

2 个答案: