Css 叠加div'；s"；：“之前”；满足于主div

我正在寻找一些方向，因为我有点迷路了

我有一个带有：before样式的容器div，用于在页面上添加一些信息。这很有效，因为我发现了一个使用SO at的示例。我想要的是，当扩展“main”div时，它会覆盖：before伪元素的内容

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

HTML

JavaScript（只是为了扩大主要内容div，而不是实际问题的一部分！）

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

---

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

只需添加

位置：相对到您的
。居中me
元素

为了你的健康

太好了！哦。。。太简单了。这回答了张贴的问题。。。现在我们需要看看它在我的真实布局中是如何工作的。还感谢jQuery的建议。。。它只是又快又脏@阿隆恰诺奇戈卢布的位置：相对而言，在几乎任何情况下都应该打得很好。不会像使用position:absolute那样破坏布局-但需要任何类型的定位元素才能看到z索引的作用，否则z索引将不适用。@RokoCBuljan。。。是 啊布局本身做得很好，谢谢！因为我实际上不是一个CSS人（尽可能多地呆在C#&tSQL中）。。唯一的事情，这抛出的是滚动条上的各个页面部分。但当我知道如何提问时，我就能解决这个问题。
<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>

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

(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);