html - 内容不在内容 HTML 后面的元素前面

Question

http://fiddle.jshell.net/hutber/uAczq/是解释它的最简单方法。

/html
<div title="1%">
    1% 
    <div class="background rating_90"></div>
</div>
//css
.rating {
    display: block;
    width: 100%;
    height: 18px;
    line-height: 18px;
    border: 1px solid #7F7F7F;
    position: relative;
    text-align: center;
    border-radius: 3px;
}

.rating .background.rating_90 {
    width: 90%;
}
.rating .background {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: #75890C;
    border-right: 1px solid #7F7F7F;
}

目前，里面的文字是不可见的，.background 位于文字的前面。

我不想在父 div 中添加另一个元素

Answer 1

使用 z-index: -1。

z-index 只能用于明确定位的元素。这意味着任何具有 position: relative; 或 position: absolute; 的内容都可以定位在 Z Pane 中，或者为了更好地理解页面中的“深度”级别。

做:

.rating .background {
   z-index: -1;
   /* The rest of your CSS */
}

您还可以删除 content: ''; 因为它对非伪选择器没有影响。

See Fiddle here.