Menu
I am trying to style a element with the :after pseudo element CSS selector
#element { position: relative; z-index: 1; } #element::after { position:relative; z-index: 0; content: " "; position: absolute; width: 100px; height: 100px; } It seems like the ::after element can not be lower then the element itself.
Is there a way to have the pseudo element lower then the element itself?
290
In CSS2. 1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
It is important to realize that pseudo-elements are considered descendants of their associated element. You may set a negative z-index for these pseudo-elements, but in order for them to actually appear below their parent element, you must create a new stacking context for the parent.
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
