出现在内容顶部的css伪元素

Question

我正在尝试创建三列设计。我遇到的问题是我需要所有列显示为相同的高度出于显示原因，所以带有clearfix的简单浮点数不会。我解决这个问题的方法是尝试使用父代的前后伪元素来模拟第一个和第三个容器的背景。这在视觉上适用于背景，但绝对定位的伪元素出现在浮动内容之上。有没有办法来防止这种情况？我曾尝试玩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

可以设置不同的z-index到伪和floatted元素

例如floatted元素：DO：position:relative;z-index:1;

为伪元素或父pse​​u do元素添加：z-index:0;或取消设置任何z-index。

一个快速修复将是：pointer-events:none;关于pseudos元素，但不是跨浏览器。

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