Question

我试图根据以下内容实施某些内容：

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

简而言之，这是我的测试用例：

为什么两个.panel都没有以绿色背景显示？

当我的专栏位于背景颜色的BODY（第二个.panel）顶部时，一切都很好，但是当它位于背景颜色的块顶部时（第一个.panel，顶部.content），然后这个DIV的背景似乎位于我的列顶上，即使看起来它的堆积顺序中的z索引较低。

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>

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%;            
}

Answer 1

您的内容div需要定位才能让z-index工作 - read this about stacking context

目前它的z-index为0，因此它将高于您的:before内容

试

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

Example

ps，那个教程是垃圾 - 如果他打算使用伪选择器使背景高度相等，那么他也可以使用display table property for proper equal height columns

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

CSS等于高度列：before - 意外的背景行为/堆叠顺序

1 个答案: