css 伪元素出现在内容之上

Question

我正在尝试创建一个三列设计。我遇到的问题是，出于显示原因，我需要所有列都显示相同的高度，因此带有 clearfix 的简单 float 是行不通的。我对此的解决方案是尝试使用父元素的前后伪元素来模仿第一个和第三个容器的背景。这在视觉上适用于背景，但绝对定位的伪元素出现在 float 内容上方。有没有办法防止这种情况？我试过玩 z-index 无济于事。 JSfiddle:http://jsfiddle.net/jppower175/7USbS/1/

HTML

<div id="main-area" class="clearfix">
    <div id="sidebar">
        <ul id="side-nav">
            <li><a href="#">Title</a>
                <ul class="sub-menu">
                    <li><a href="#">Title</a></li>
                    <li><a href="#">Title</a></li>
                    <li><a href="#">Title</a></li>
                    <li><a href="#">Title</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="text-area">
        <p>blah blah</p>
    </div>
    <div id="right-bar">

    </div>
</div>

CSS

#main-area {
position: relative;
border: 2px solid #a06147;
background: #fcfef6;
height: 350px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}

#main-area:before {
content: '';
position: absolute;
width: 20%;
height: 100%;
left: 0px;
top: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #cbdc99;
border-right: 5px solid #e3eed0;
z-index: 0;
}

#main-area:after {
content: '';
position: absolute;
width: 20%;
height: 100%;
right: 0px;
top: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #3c455b;
border-left: 5px solid #80a87e;
z-index: 1;
}

#sidebar {
position: reletive;
float: left;
min-height: 100px;
width:20%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0px 5px 0px 0px;
border: 1px solid #000;
z-index: 50;
}

#text-area {
position: relative;
float: left;
padding: 1px 25px;
width:60%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#right-bar {
position: relative;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0px 0px 0px 5px;
width:20%;
}

.clearfix:before,
.clearfix:after {
 content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
clear: both;
}

Answer 1

你可以为伪元素和 float 元素设置不同的z-index

例如 float 元素:做:position:relative;z-index:1;

对于伪元素或父伪元素添加:z-index:0; 或取消设置任何 z-index。

快速修复是:pointer-events:none; 在伪元素上，但不是跨浏览器。

http://jsfiddle.net/7USbS/2/ 您添加了拼写错误的值:reletive 而不是 relative。