Overlaying div's ":before" content with the main div

Question

I am looking for some direction pointing as I am a bit lost.

I have a container div with a :before style I am using to add some information on a page. This works well as I found an example using SO at How can I add a large faded text background via css?. What I want is that when the "main" div is expanded, that it covers up the :before pseudo element's content.

I have tried various combinations of div structuring (containers) and palyed with the z-index of the pseudo element and the main div. NOTE that I can not put a "z-index" of -1 on the "title" text ... as that actually hides it behind content I actually want to see in my actual application.

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 (just for enlarging the main content div, not apart of the actual question!)

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

I created a little jsFiddle to show what I am referring to. When the "box" is expanded, I would like it to go "over" (basically hiding) any of the "Title" text. (Any little bit left over showing is fine!)

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

Any direction pointing would be useful as I just could not find what I was trying to accomplish. Even if that is to try a new layout altogether (that achieves something similar). If I am missing any useful information, please ask ... thanks in advance.

score 1 · Accepted Answer · answered Nov 10 '15 at 12:39

1

Simply add position:relative; to your .center-me element
in order for your z-index to apply ^z-index@MDN.

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

answered Nov 10 '15 at 12:39

Roko C. Buljan

196,159
39
305
313

Great! Oye ... too simple. This answers the question posted ... now need to see how it will actually work in my real layout. Also thanks for the jQuery suggestion ... it was only quick and dirty! – ACG Nov 10 '15 at 13:18
@AlonChanochGolub Position:relative should play quite well in almost any situation. Will not destruct your layout like i.e. using position:absolute - But any kind of positioned element is *needed* in order to see the z-index in action, otherwise z-index will not apply. – Roko C. Buljan Nov 10 '15 at 13:20
@RokoCBuljan ... yeah ... the layout itself is doing well thanks! Since I am not actually a CSS person (try to stay in C# & tSQL as much as possible) .. the only thing that this throws off is the scroll bars on the various page sections. But I can deal with that when I can figure out how to ask question. – ACG Nov 10 '15 at 14:07

Overlaying div's ":before" content with the main div

1 Answers1