Question

我怎样才能得到我的：选择器在其框后面和包含框背景前？我试图制作纸张卷曲效果，但我无法获得：选择器前必须去的地方。我做了一个jsfiddle来说明我的问题。以下是代码：

HTML：

<body>
<div class="wrapper">
    <div class="content">
        <div class="paper">Lorem ipsum dolor sit amet...</div>
    </div>
</div>

CSS：

body {
    background-color: #ddd;
}
.wrapper{
    width: 960px;   
    background-color: #fff; /* The :before selector seems to hide behind this */
    margin: 0px auto 0px auto;
    overflow: auto;
    font-size: 18px;
    line-height: 1.4em;
    word-spacing: 0.05em;
    letter-spacing: 0.01em; 
}
.content {
    width: 700px;
    margin: 160px 10px 10px 120px;
    float: left;
}

.paper {
    background-color: #fff;
    position: relative;
    border: 1px solid #777;
    width: 600px;
    height: 300px;
    margin: 30px auto;
}

.paper:before {
    content: "hallo";
    width: 300px;
    height: 100px;
    background-color: #777;
    position: absolute;
    top: 200px;
    left: -100px;
    z-index: -1;
}

我需要让：before选择器出现在＆＃34; content＆＃34;和＆＃34;纸张＃34; div的。有什么想法吗？

Answer 1

您需要使用z-index。首先检查 DEMO 。

这是修改CSS。

.content {
width: 700px;
margin: 160px 10px 10px 120px;
float: left;
position:relative; /*Added Line*/
z-index: 1; /*Added Line*/
}

.paper:before {
content: "hallo";
width: 300px;
height: 100px;
background-color: #777;
position: absolute;
top: 200px;
left: -100px;
z-index: -1; /*Added Line*/
}

Answer 2

我在jsfiddle中用你的元素做了一个例子。看看这是否是你想要的

http://jsfiddle.net/nGx5Q/

<body>
    <div class="wrapper">
        <div class="content">
            <div class="paper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</div>
        </div>
    </div>  
</body>


body {
    background-color: #ddd;
}

.wrapper {
    width: 960px;   
    background-color: #fff; /* The :before selector seems to hide behind this */
    margin: 0px auto 0px auto;
    overflow: auto;
    font-size: 18px;
    line-height: 1.4em;
    word-spacing: 0.05em;
    letter-spacing: 0.01em; 
    position:relative;
}

.content {
    width: 700px;
    margin: 160px 10px 10px 120px;
    float: left;
    background: #e7e7e7;
        position: relative;
    z-index: 999;
}

.paper {
    background-color: #fff;
    position: relative;
    border: 1px solid #777;
    width: 600px;
    height: 300px;
    margin: 30px auto;
}

.paper:before {
    content: "hallo";
    width: 300px;
    height: 100px;
    background-color: #777;
    position: absolute;
    top: 200px;
    left: -100px;
    z-index: -1;

}

Answer 3

Z-索引。

变化：

.paper:before {
z-index: -1;}

要

.paper:before {
z-index: 1;}

如何获得：选择器在它的盒子后面？

3 个答案: