将 div 的":before"内容与主 div 叠加

Question

我有点迷路了，正在寻找一些指向。

我有一个带有：before样式的容器div，用于在页面上添加一些信息。这很好，因为我在How can I add a large fadded text background via css？上找到了一个使用SO的例子？。我想要的是，当"main"div被展开时，它会覆盖：before伪元素的内容。

我尝试了各种div结构（容器）的组合，并尝试了伪元素和主div的z索引。注意，我不能在"title"文本上放置-1的"z索引"。。。因为这实际上把它隐藏在了我真正想在实际应用程序中看到的内容后面。

HTML

<div class="show-title" data-div-title="Div Title">
    <div class="center-me">
        This is my box!
    </div
<div>
<button id="set500">500px</button>
<button id="set1000">1000px</button>
<button id="set1500">1500px</button>

CSS

.show-title::before {
    color: dimgrey;
    content: attr(data-div-title);
    display: block;
    font-size: 1.2em;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 10px;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    text-orientation: upright;
    padding: 3px;
    background-color: gainsboro;
    border: 1px solid darkgray;
    border-radius: 3px;
    z-index:1;
}
.center-me {
    color: dimgrey;
    padding:10px;
    background-color: gainsboro;
    border: 1px solid maroon;
    width: 500px;
    height: 300px;
    margin-left: auto ;
    margin-right: auto ;
    overflow: auto;
    z-index:10;
}

JavaScript（只是为了放大主要内容div，而不是实际问题！）

(function($){
    $("#set500").on("click", function() {
        $(".center-me").width("500px");
    })
    $("#set1000").on("click", function() {
        $(".center-me").width("1000px");
    })
    $("#set1500").on("click", function() {
        $(".center-me").width("1500px");
    })
})(jQuery);

我创建了一个小jsFiddle来显示我所指的内容。当"框"展开时，我希望它"覆盖"（基本上隐藏）任何"标题"文本。（剩下的任何一点都可以！）

http://jsfiddle.net/uLohn3e4/3/

任何方向指示都是有用的，因为我只是找不到我想要实现的目标。即使这是为了尝试一种全新的布局（达到类似的效果）。如果我遗漏了任何有用的信息，请询问。。。提前谢谢。

Answer 1

只需将position:relative;添加到.center-me元素中
以便您的z-index应用^z-index@MDN。

http://jsfiddle.net/uLohn3e4/5/