Can't get z-index to work for div inside of another div
A positioned container always contains its children. You can't have the content of a container below the container itself. See this test file that I made (about 7 years ago) showing the situation.
Note in particular that the dark blue div is z-index:-100
, but doesn't appear below its z-index:3
parent container, nor below a different z-index:2
container that is its "uncle" (sibling of its parent).
The z-index
of an element is only valid with respect to other elements using the same positioned container. Once you set position:relative
on test_1
you are causing its z-index
to be in a different world than the z-index
of test_2
. The closest you can do is set #test_2 { z-index:-1 }
to cause it to appear below the content of #test_1
(but not below its background).
z-index for the nested div
Because the .child
is relative to its .parent
, so does its z-index.
You can do away with this by removing the z-index
of the parent:
.sel_project_block {
background-color: #f5876e;
border-radius: 14px;
margin-right: 150px;
width: 239px;
height: 34px;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
box-shadow: 1px 3px 7px #000;
}
.additional {
height: 50px;
max-width: 185px;
position: absolute;
top: 76.2%;
right: 22.05%;
z-index: -1;
color: #67573e;
background-color: #fff;
border: 1px solid #978d7e;
font-size: 16px;
width: 185px;
}
<div class="sel_project_block">
<div class="additional"></div>
</div>
z-index a single div inside another one
.container {
height: 150px;
width: 350px;
position: relative;
background-color: white;
z-index: 20;
}
Just add position:relative
property to .container
div :)
Z-index doesn't work with overlapping a parent DIV with one inside it
The problem is that your .in_MB
element is tied to the outer_MB
element. No matter what your inner element's z-index
is set to, it will always display on top of the outer element.
Imagine having two boxes. A large box and a small box. You place the small box inside the large box. You then lift the large box up - the small box doesn't stay where it is, it lifts with the large box.
If you want .in_MB
to appear behind .outer_MB
, you'll need to make them separate elements:
<div class="outer_MB"></div>
<div class="in_MB"></div>
You'll then need to style the .in_MB
element to appear in the same position as the .outer_MB
element. As these elements are now separate but share the same overall ancestor, the z-index
will kick into action accordingly.
Why does z-index not work?
The z-index
property only works on elements with a position
value other than static
(e.g. position: absolute;
, position: relative;
, or position: fixed
).
There is also position: sticky;
that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
one div inside another appears while hovering - z-index not working
Try adding this to the delete button:
position: relative;
top: -30px;
Live Demo
Z-index not working properly with overlapping divs
You are closing the container div before entering the blue square div.
You need two children divs inside the container for the z-index to work.
In this case, you would need something like this:
#container{
height:100px;
width:100px;
z-index:1;
position:absolute;
border:1px;
background-color:yellow;
}
#moving1{
height:30px;
width:30px;
background-color:blue;
position:absolute;
left:20%;
top:50%;
z-index:4!important;
transition: 1s ease;
}
#moving2{
z-index: 3;
height:100px;
width:100px;
position:absolute;
top:0%;
left:0%;
background-color:red;
transition: all 1s ease;
}
.moveLeft{
transform: translateX(-110%);
}
.moveUp{
transform: translateY(-200%);
}
<div id="container" onmouseleave="document.getElementById('moving2').classList.remove('moveLeft'); document.getElementById('moving1').classList.remove('moveUp');">
container
<div id="moving1"></div>
<div id="moving2" onmouseenter="this.classList.add('moveLeft'); document.getElementById('moving1').classList.add('moveUp');"></div>
</div>
z-index not working with elements whose parents are in fixed position
The simple solution is that what I'm trying to do is simply impassible.
The answer by #Krypton indeed solve this issue by altering the html, however in my situation altering the html order isn't possible.
The order of elements is called the Stacking Order, the stacking order is:
1. If no z-index or position then the stacking order is as the html markup order.
2. All positioned elements (relative
, absolute
and fixed
) appear on top of all none positioned elements (static
).
3. z-index works only on positioned elements, and it will create Stacking Context.
Stacking Context
Group of elements with common parent create Stacking Context if one of the next conditions are meet:
1. The root document element (the <html>
element).
2. Positioned element with z-index
3. Element with opacity less the 1 (this isn't known by most of web developers)
All the elements in Stacking Context move together in the stacking order,
meaning that if element a
inside staking context A
, can't be above element b
inside staking context B
, if the stacking order of B
is higher the A
,
even if the element 'a' has z-index of a million.
Update: new css roles that create Stacking context: transform
, filter
, css-region
and pages_media
.
The order inside the Stacking Context:
1. root element
2. positioned element with negative z-index.
3. none positioned elements in the order of the html markup
4. positioned elements
5. positioned elements with z-index according to the z-index.
- Now back to the question, in this example both the red and the green div create stacking context since they are positioned (fixed) and have z-index.
- Both of them have the same z-index (value of 2), therefor there stacking order is the red below the green since this is the order of the html markup.
- Now lets look at the pink and the lightgreen elements, the pink is nested inside the red elements and the lightgreen inside the green elements,
since the red element has lower staking order than the green, all the nested elements inside the red elements appear below all the elements inside the green elements.
To fix this issue we need to create a new element that will create a new stacking context with higher stacking order than the red and the green div and place our popups inside of that elements.
Reference: What No One Told You About Z-Index by Philip Walton:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Displaying element behind other with z-index doesn't work
Add position: relative;
to #text1, #text2
http://jsfiddle.net/AVxbd/2/
z-index applies only to positioned elements.
Related Topics
CSS Fixed Position with Auto Margin
How to Make CSS Animation to Play Every 10 Seconds
CSS Display: Inline-Block Does Not Accept Margin-Top
How to Use Font-Weight with Font-Face Fonts
What Are the Difference Between Col-Lg and Col-Md in Bootstrap3
What Is an Alternative to CSS Subgrid
Keep Footer with Variable Height on Bottom
How to Add a CSS Stylesheet in Fxml
Compiling Issue in Bootstrap 3 with Namespace
Customize List Item Bullets Using CSS
How to Hide Anchor Text Without Hiding the Anchor
Vertically Center Rotated Text with CSS
How to Make Content Appear Beneath a Fixed Div Element
How to Use the Matrix Transform and Other Transform CSS Properties
How to Convert .Svg Files to a Font
Allow a Div to Cover the Whole Page Instead of the Area Within the Container