Befeore/After on absolute:position and z-index:1 element

Question

How to arrange :before or :after pseudo element with position: absolute and z-index: -1 under element with position: absolute and z-index: 1

https://jsfiddle.net/x5x6ye97/2/

#element { 
    position: absolute;
    z-index: 1;
    
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
    top: 20px;
    z-index: -1; 
}

<div id="element"></div>

Your question may be duplicate look at here: http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible http://stackoverflow.com/questions/7822078/z-index-with-before-pseudo-element http://stackoverflow.com/questions/12463061/z-index-not-working-on-pseudo-elements — Sayed Rafeeq, Oct 06 '16 at 12:22
well it is not duplicated because my structure is different, but in the first question may be partial answer on my question — gidzior, Oct 06 '16 at 12:46
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Oct 06 '16 at 13:58

score 1 · Accepted Answer · answered Oct 06 '16 at 14:03

Well I think you want to achieve this...

Below is the working code-

#element { 
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: green;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: yellow;
    position: absolute;
    z-index: -1;  
}

<div id="element"></div>

Hoping this will help you :)

Befeore/After on absolute:position and z-index:1 element

1 Answers1