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元素：do：position:relative;z-index:1;

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

快速修复：假设元素上的pointer-events:none;，但不是跨浏览器。

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

css伪元素出现在内容之上

1 个答案: