z-Index behaviour on pseudo elements

Question

see:

the div is relative with z-index 5, and the :after thing is absolute with z-index 2.

So shouldn't :after be behind the div?

div{
    position:relative;
    z-index: 5;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: 2;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}

<div>erferf</div>

Interestingly, if you set it to a negative number it displays behind the text but in front of the div background :/ — chrisfrancis27, Sep 17 '12 at 16:08
@Chris Francis: [There's a Stack Overflow question for that.](http://stackoverflow.com/questions/11088176/before-pseudo-element-stacking-order-issue) — BoltClock, Sep 17 '12 at 16:14

score 37 · Accepted Answer · edited Jun 30 '20 at 11:17

37

You would have to give pseudo elements a negative z-index to get it to go behind it's parent, plus remove the z-index on the parent. http://jsfiddle.net/jklm313/Kq2PY/4/

div{
    position:relative;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: -1;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}

<div>erferf</div>

edited Jun 30 '20 at 11:17

messerbill

5,499
1
27
38

answered Sep 17 '12 at 16:06

carpenumidium

1,193
11
18

2

@Alex: It's normal behavior, but it's mostly explained by the [spec](http://www.w3.org/TR/CSS21/visuren.html#layers) and all it offers is a very technical breakdown of what's going on... – BoltClock Sep 17 '12 at 16:16
I don't think it's a bug because that's how it displays on the browsers I've tested(IE9, Opera, Chrome, FF). It is pretty absurd though. – carpenumidium Sep 17 '12 at 16:21
1

Removing the Z-index of the parent as answered above is important, otherwise the z-index on the pseudo elements wont work as desired. – Samuel MacLachlan May 28 '14 at 07:01
Somehow does not work 100% for fixed positioned parent.. it is just behind text, but not behind element itself. :/ http://jsfiddle.net/jklm313/Kq2PY/4/ – Luckylooke Nov 21 '19 at 11:41
Removing the z-index on the parent element is important as said above, as well as any other property that can create a stacking context such as transform, filter etc. – Max Jul 04 '21 at 23:26

score 7 · Answer 2 · edited Feb 10 '20 at 08:57

7

div { z-index: 1; }

div::after { z-index: -1;}

edited Feb 10 '20 at 08:57

minus.273

755
11
24

answered Feb 10 '20 at 08:32

Sport Director

79
1
1

2

Hi and welcome to stackoverflow, and thank you for answering. While this code might answer the question, can you consider adding some explanation for what the problem was you solved, and how you solved it? This will help future readers to understand your answer better and learn from it. – Plutian Feb 10 '20 at 09:27
So a problem I encountered was that with `::before` on an element that was being used for a background image caused all the children (that were inside of the background image container tag) to be drawn underneath the image (that had a low opacity), so I could see the buttons I wanted to click, but couldn't, because it was really just clicking the background image. When you put `z-index: -1;` on just the pseudo element, it hides the image, but when you add `z-index: 1;` to the parent, it displays both... beats me with a stick. – Shmack Oct 12 '22 at 20:03

z-Index behaviour on pseudo elements

2 Answers2

Linked