When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it. Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block. I’m not aware of any work-arounds.
Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container. Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned elements. 4.3. Flex Item … Read more
There are two solutions I can think of quickly off the top of my head. You can either give the #headercontainer element a z-index CSS property… #headercontainer { /* … other CSS … */ z-index: 1000; } … or you can do it the way I think it should be done… #headercontainer { /* … … Read more
Positioned elements with a z-index value other than “auto” and elements with an opacity value less than 1 generate a stacking context. Refer to the rules regarding the painting order. In your first example we have the root stacking context with various descendants including: positioned green box with positive z-index positioned blue box with auto … Read more
Note that z-index only affects positioned elements. Therefore, any element with position: static will not have a z-index, even if you assign it a value. This is especially true in browsers like Google Chrome. var index_highest = 0; // more effective to have a class for the div you want to search and // pass … Read more
Because position: static means “Ignore all the positioning instructions from left, top, z-index, etc.”. ‘z-index’ Value: auto | <integer> | inherit Initial: auto Applies to: positioned elements — http://www.w3.org/TR/CSS21/visuren.html#z-index An element is said to be positioned if its ‘position’ property has a value other than ‘static’. — http://www.w3.org/TR/CSS21/visuren.html#positioned-element
Don’t specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want. .bank { position:relative; background: red; width: 500px; height: 200px; } .card { … Read more
This is because a value other than none establishes a stacking context. This is documented in the spec (which is currently in Working Draft status): 2 Module interactions This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements … Read more
Both negative and positive integers are allowed. The position must be set on the element. Before I get into those details, though, let me explain z-index from the ground up. Every webpage is made up of what are called stacking contexts. You can think of these as, quite literally, a stack of elements. The z-index … Read more
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 … Read more