CODEWITHSUNDEEP
css
ACG
ACG

Reputation: 750

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

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.

Upvotes: 1

Views: 780

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206638

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/

Upvotes: 1

Related Questions