0

I'm trying to implement something based upon:

http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

In a nutshell, here is my test case:

http://jsfiddle.net/7CGCW/

Why are not both .panel's displayed with a green background?

All is well when my column sits atop a background-color'ed BODY (the second .panel), but when it sits atop a background-color'ed block (the first .panel, on top of .content), then the background of this DIV appears to sit atop my column, even when it is seemingly given an z-index that is lower in the stacking order.

The HTML:

<div class="content">
    <div class="positioned">
        <div class="panel">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel rutrum libero. Proin in metus id odio rutrum posuere at ac dui. Etiam sollicitudin in dui sed imperdiet. Suspendisse eu erat nec ipsum facilisis iaculis.
        </div>
    </div>
</div>

<div class="positioned">
    <div class="panel">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel rutrum libero. Proin in metus id odio rutrum posuere at ac dui. Etiam sollicitudin in dui sed imperdiet. Suspendisse eu erat nec ipsum facilisis iaculis.
    </div>
</div>

The CSS:

body {
    background-color: red;
    color: blue;
}

.content {
    background-color: red;
    z-index: -2;
}

.positioned {
    position: relative;
}

.panel:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-color: green;
    width: 100%;            
}
4

1 回答 1

1

您的内容 div 需要定位以使 z-index 工作 -阅读有关堆叠上下文的信息

目前它的 az-index为 0 所以它将高于您的:before内容

尝试

.content {
    background-color: red;
    position:relative;
    z-index: -2;
}

例子

ps，该教程是垃圾-如果他要使用伪选择器使背景等高，那么他不妨利用显示表属性来获得适当的等高列

使用更少的标记和样式更容易做到，并且不必考虑所有 z 索引和定位

于 2014-05-21T14:06:16.433 回答