Is it possible to set the stacking order of pseudo-elements below their parent element?
Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.
Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the new stacking context.
#element { position: relative; /* optional */ width: 100px; height: 100px; background-color: blue;}
#element::after { content: ""; width: 150px; height: 150px; background-color: red;
/* create a new stacking context */ position: absolute; z-index: -1; /* to be below the parent element */}
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Position a pseudo-element below its parent</title></head><body> <div id="element"> </div></body></html>
Z-index with before pseudo-element
The ::before pseudo-element is placed inside the header element.
CSS Spec:
The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.
Setting the z-index for the header element creates a new Stacking Context, so the new pseudo element you created can not float behind the header element, because it would have to go outside that Stacking Context.
I suggest that you simply precede the header element by another element, so it stacks correctly by default. Example.
z-index doesn't work with ::after/::before element?
You can remove z-index
from parent element and use negative z-index: -1
on pseudo element. If you want only green line on red line you need to remove white background from parent also DEMO
.or { border: 2px solid #8fc300; border-radius: 5px; color: #333; font-size: 17px; font-weight: 600; height: 34px; line-height: 26px; text-align: center; width: 34px; margin-top: 64px; margin-left: 20px; margin-right: 20px; background: #fff; /*For z-index - keep the green area on top*/ position: relative;}.or::after { background: red; content: ""; display: block; height: 116px; margin-left: 15px; margin-top: -68px; width: 4px; /*For z-index - keep the green area on top*/ position: absolute; z-index: -1;}
<div class="or"></div>
z-index not working properly with pseudo-element
That is because you have positioned your pseudo-element absolutely in the <a>
element, and this causes it to be stacked on top of the text node, which has static positioning.
To solve this issue, simply wrap the inner text with <span>
and then add this rule:
.start-coding > span {
position: relative;
z-index: 2;
}
Even better: you don't even need to add z-indices to both ::before
and the nested <span>
, since they come in an order that ensures that, when they are placed in a stacking context, the <span>
will always be on top (since it comes after the ::before
element in the DOM tree). See example:
.start-coding {
display: block;
font-size: 1.3rem;
color: white;
background-color: black;
padding: 0.4rem 1.8rem;
position: relative;
z-index: 5;
border-radius: 5px;
width: 100%;
}
.start-coding::before {
content: '';
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
border-radius: 5px;
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
}
.start-coding>span {
position: relative;
}
<a href="#" class="start-coding"><span>Start Coding</span></a>
CSS Pseudo Element Z-Index
This cannot be done due to the overlay context.
I can suggest a hack, using transform-style: preserve-3d
for the parent, and transform: translateZ(-1px)
and position: absolute
for the :before
pseudo-class.
.element {
margin: 0 auto;
height: 100px;
width: 100px;
background-color: green;
transform-style: preserve-3d;
position: relative;
color: white;
}
.element::before {
content: ">";
color: red;
font-size: 64px;
transform: translateZ(-1px);
position: absolute;
left: -15px;
}
<div class="container">
<div class="element">TEST TEXT</div>
</div>
z-Index behaviour on pseudo elements
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>
Pseudo element with z-index: -1 is hidden by background-color
Add z-index:0
(or any value) to the background element in order to create a stacking content and avoid the pseudo element moving behind:
.bg { background-color: aqua; height: 100vh; position:relative; z-index:0; /* added */}
.link { position: relative; font-weight: bold;}
.link::after { content: ''; position: absolute; z-index: -999; /*you can put any negative value now*/ top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 0 0 1em #888888 inset; opacity: 0;}
.link:hover::after { opacity: 1;}
<div class="bg"> <p class="link">Link</p></div>
Why can't an element with a z-index value cover its child?
There are two important things you need to know: the painting order and the stacking context. If you refer to the specification, you can find how and when elements are painted.
- Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.
All positioned, opacity or transform descendants, in tree order that fall into the following categories:
- All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
- Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.
It's clear from this that we first paint elements with negative z-index
at step (3), then the one with z-index
equal to 0 at step (8), and finally the ones with positive z-index
at step (9), which is logical. We can also read in another part of the specification:
Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked bottom-to-top according to document tree order.
To understand when each element will be painted you need to know its stacking context and its stack level inside this stacking context (defined by z-index
). You also need to know whether that element establishes a stacking context. This is the tricky part, because setting z-index
will do this:
For a positioned box, the z-index property specifies:
- The stack level of the box in the current stacking context.
- Whether the box establishes a stacking context
Values have the following meanings:
<integer>
This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.
auto
The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.
Now we have all the information to better understand each case. If the parent element has a z-index
value of something other than auto
, then it will create a stacking context, thus the child element will be painted inside whatever their z-index
is (negative or positive). The z-index
of the child element will simply tell us the order of painting inside the parent element (this covers your second point).
Now, if only the child element has a positive z-index
and we set nothing on the parent element, then considering the painting order, the child will be painted later (in step (9)) and the parent in step (8). The only logical way to paint the parent above is to increase the z-index
, but doing this will make us fall into the previous case where the parent will establish a stacking context and the child element will belong to it.
There is no way to have the parent above a child element when setting a positive z-index
to the child. Also there is no way to have the parent above the child if we set a z-index
to the parent element different from auto
(either positive or negative).1
The only case where we can have a child below its parent is to set a negative z-index
on the child element and keep the parent at z-index: auto
, thus this one will not create a stacking context and following the painting order the child will be painted first.
In addition to z-index
, there are other properties that create a stacking context. In case you face an expected stacking order, you need to consider those properties, too, in order to see if there is a stacking context created.
Some important facts that we can conclude from the above:
- Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
- Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
- Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. ref
1: there is some hacky ways if we consider the use of 3D transformation.
Example with an element going under its parent element even if this one has a z-index
specified.
.box {
position:relative;
z-index:0;
height:80px;
background:blue;
transform-style: preserve-3d; /* This is important */
}
.box > div {
margin:0 50px;
height:100px;
background:red;
z-index:-1; /* this will do nothing */
transform:translateZ(-1px); /* this will do the magic */
}
<div class="box">
<div></div>
</div>
Related Topics
How to Have Css3 Animation to Loop Forever
How to Apply Multiple Background Colors With Css3
Offsetting Columns Is Not Working (Bootstrap V4.0.0-Beta)
Forcing Anti-Aliasing Using CSS: Is This a Myth
How to Wrap Text With No Whitespace Inside a ≪Td≫
Defined Edges With Css3 Filter Blur
Ordering of Vendor-Specific CSS Declarations
What Does A[Href^="..."] Do in Css
How to Vertically Middle-Align Floating Elements of Unknown Heights
Every Item to Have the Same Width as the Widest Element
How Does Border-Image Work With Linear-Gradient
CSS - Center Two Images in CSS Side by Side
Box Shadow on Table Row Not Appearing on Certain Browsers
How to Write a CSS Hack For Ie 11
Bootstrap 4 Card-Deck with Number of Columns Based on Viewport
Style ≪Select≫ Element Based on Selected ≪Option≫