CODEWITHSUNDEEP
cssz-index
kenjiri
kenjiri

Reputation: 13

Z-index not working on pseudo elements

I have looked at other answers but was not able to specifically find an example. If i am using a :before or :after pseudo element as an overlay with an absolute position, is it possible to change the z-index of elements inside the parent container to bring them above the overlay. I have created a basic example, any help would be much appreciated as having a hard time understanding how to get the z-index to work correctly in this situation:

Example of the structure would be as follows:

<div class="page-banner">
<div class="container">
     <h2 class="page-title">Shop</h2>
</div>

CSS as follows:

.page-banner {
    position: relative;
    z-index: 1;
    height: 100%;
    background-image: url('http://placehold.it/1920x500'); background-size: cover;
}

.page-banner .page-title {
    z-index: 150;
}

.page-banner:after {
    position: absolute;
    left: 0;
    content:"";
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    z-index: 1;
}

http://jsfiddle.net/webidia/co9u3vqa/1/

Upvotes: 1

Views: 722

Answers (1)

pavel
pavel

Reputation: 27072

Set negative z-index to :after to put in under inner elements (.page-title).

.page-banner:after {z-index: -1}

http://jsfiddle.net/co9u3vqa/5/

Upvotes: 1

Related Questions