This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
My CSS code has two squares, green (small, child) and red (big, parent). I want to hide the lower half of small box under big box so that no overlap is visible.
My following code doesn't work but if I remove z-index on the red box, it works.
I can't understand this behaviour. As per my understanding, any -ve z-index on the child will take it below the parent no matter what the z-index on the parent is.
Is it incorrect?
.parent {
background:red;
height: 100px;
width: 100px;
position: absolute;
z-index:1;/*comment this line to make it working*/
}
.child {
height: 10px;
width: 10px;
position:absolute;
background:green;
top: 0%;
left: 50%;
transform: translateY(-50%);
z-index: -1;
}
<div class="parent">
<div class="child"></div>
</div>
Expected result:
By giving the parent element a z-index of its own you establish a new stacking context.
This causes the z-index of the child to be scoped to inside the parent instead of scoped to the html element.
Related
This question already has answers here:
How to blur(css) div without blur child element [duplicate]
(4 answers)
making css not affect children
(4 answers)
Closed 3 years ago.
I wonder if there is any way to set properties to an element but not its children.
E.g
<div>
<span>A child</span>
</div>
That the span child will not get affected.
So if I want to for example give the div a blur filter and don't want to affect the children of the element, how do I do it?
CSS is hierarchical; any attribute applied to a parent is automatically inherited by the child:
The only way to give a parent an attribute while simultaneously excluding the child is to additionally give the child an attribute that overrides the parent (with higher specificity):
This is best done with the initial value (which 'resets') the value, though you can use any other value you like:
div {
color: red;
}
div > span {
color: initial;
}
<div>Parent
<span>A child</span>
</div>
You could set the required property on the element you want to affect, then select the children of this element and unset the same property or give it a different value.
Does this answer your question?
Not if you target the div (in this case) directly, then the span is force-blurred as well.
But, you could fake the div with a pseudo element, perhaps something like this:
div {
width: 200px;
height: 200px;
position: relative;
}
/* A fake box with the same dimensions as the div */
div::before {
content: "";
background: red;
display: block;
filter: blur(10px);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
span {
position: relative; /* Z-index purposes */
}
<div>
<span>I'm not blurry :D</span>
</div>
you can give separate classes to them and specify options separately in css.
This question already has answers here:
Why does z-index not work?
(10 answers)
Why does position:relative; appear to change the z-index?
(2 answers)
Why using absolute position causes the div to be on top?
(3 answers)
Closed 3 years ago.
Hey guys I faced the confusion with stacking context in CSS, that is, as you can see in the code below I used opacity: .99; to create stacking context for both boxes and decided to use z-index for orange box but the orange box is not placed above green one. Why? I thought it is possible to use z-index with elements having transform and opacity attributes. My second question is that since I am beginner I just wanted to ask why when I create stacking context using opacity or transform for a certain element (say div) that div element is placed above other static elements. Is z-index added to the element behind the scenes or something like that.
.green {
background: green;
height: 250px;
width: 1090px;
margin-top: -70px;
opacity: .99;
}
.orange {
background: orange;
height: 150px;
width: 150px;
opacity: .99;
z-index: 1000;
}
<div class="orange">Orange</div>
<div class="green">Green</div>
z-index only applies to positioned elements, which are elements where the position property has a value other than static (which is the default).
Set position: relative.
This question already has an answer here:
How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]
(1 answer)
Closed 4 years ago.
#twitter{
width:50px;
height:50px;
position: absolute;
right: 0%;
bottom: 0%;
background-color: orange;
z-index:-2;
}
#socialButton {
position: relative;
width: 80px;
height: 80px;
background-color: green;
z-index: 2;
}
#socialButtonRoot {
width: 100px;
height: 100px;
top:20%;
left:20%;
position: absolute;
background-color: hotpink;
z-index: 5;
}
<div id="socialButtonRoot">
<div id="socialButton">
<div id="twitter"></div>
</div>
</div>
This is a simplified version.
In my react project there's component created some Dom nodes, after that I set the styles for them in the CSS file, most styles works fine, but only the z-index style doesn't work, people said we should set the position, yes I've all of them set, but it still doesn't work. So I think it maybe something to do with React or JS, but after I extracted code from React and JS and test it on jsfiddle, z-index still doesn't work. Then, I changed changed the z-index value from 2 to "2" (a string ) , it works, but I can see the value "2" is invalid in the chrome's debug console.
It should be div socialButtonRoot on the front which have highest z-index(5) and div socialButton in the middle which have the second high z-index(2) and div twitter in the back, which have the lowest z-index.
but in the result below, it shows, div twitter on the front and div socialButton in the middle and div socialButtonRoot on the back, which isn't right.
What's the problem here?
See The Stacking Context on MDN.
A stacking context is formed, anywhere in the document, by any element in the following scenarios: … Element with a position value "absolute" or "relative" and z-index value other than "auto".
…
Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
The z-index positions an element inside the stacking context it is associated with.
Giving an element position: absolute or position: relative establishes a new stacking context.
Thus #twitter is positioned inside the 3-d box represented by #socialButton.
The z-index is for that box, and not for the entire document.
(And #socialButton is inside #socialButtonRoot in the same way).
If you want A to be rendered below B then either:
Do not position A or
Do not make B a descendant of A
When you place an element inside another element, The child element will display on top of its parent element. This is the same for many nested elements and is the default CSS behaviour. Even setting a higher z-index for the parent than its child element won't change the result. In your example:
<div id="socialButtonRoot">
<div id="socialButton">
<div id="twitter"></div>
</div>
</div>
#socialButtonRoot will be displayed at the bottom. #socialButton will display on top of #socialBuuttonRoot. On top of all, #twitter will show. The z-index will be ignored as it only affects elements of the same level.
I suggest you create a parent <div> and place all three <div>s inside:
#parent {
position: relative;
width: 100px;
height: 100px;
margin-top: 20vh;
margin-left: 20vw;
}
#socialButtonRoot {
position: absolute;
width: 100px;
height: 100px;
z-index: 5;
background-color: hotpink;
}
#socialButton {
position: relative;
width: 80px;
height: 80px;
z-index: 2;
background-color: green;
}
#twitter {
position: absolute;
width: 50px;
height: 50px;
right: 20%;
bottom: 20%;
background-color: orange;
z-index: -2;
}
<div id="parent">
<div id="socialButtonRoot"></div>
<div id="socialButton"></div>
<div id="twitter"></div>
</div>
I used position:relative for the parent <div> so that I can position the children <div>s using percentages. I also used margin-top and margin-left instead of top and left respectively, since the latter don't work with relatively positioned elements.
Since #socialButtonRoot is the largest <div> and is placed in front of the other two, it is the only one that appears when you run the snippet. You can change the z-index for each <div> as you wish
This question already has answers here:
Is there anything wrong with positioning all elements relatively?
(5 answers)
Difference between static and relative positioning
(7 answers)
Closed 8 years ago.
Just like the title, why div (or p or any other elements in html) have 'position: static' as the default value? Why not 'position: relative'?
I don't see any benefit using 'position: static' in my css.
Is it safe to define all div elements in html using 'position: relative'?
EDIT:
I'm quite aware the difference between static, relative, absolute, and fixed positioning. But the main problem is why the default positioning for div or any other html elements is static? This example:
HTML
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div-last"></div>
</div>
</div>
</div>
CSS
.div1 {
width: 700px;
height: 700px;
background-color: #000;
position: relative;
}
.div2 {
width: 600px;
height: 600px;
background-color: #333;
position: relative;
top: 20px;
left: 20px;
}
.div3 {
width: 500px;
height: 500px;
background-color: #777;
position: absolute;
right: 0;
top: 30px;
}
.div-last {
width: 400px;
height: 400px;
background-color: #AAA;
position: absolute;
bottom: 20px;
left: 20px;
}
shows that I don't need a single static positioning to arrange my divs as I want.
Here's a jsfiddle of the code above.
And sorry for my potato English. :D
EDIT #2:
The answer from the related question is:
"Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body."
So, I don't want/need to "position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.", is there any other technical precautions that I need to know before I make all divs relative?
If position: relative was the default value, position: absolute; would no longer work as expected. That is, because position: absolute uses the closest non-static positioned element in the hierarchy as the reference. If there were no static positioned elements, all would be non-static, so position: absolute would use the parent element as the reference, and thus no longer positioning absolute, but relative to the parent element.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS height 100% in IE7
I'd like to have a centered block on a webpage that's filled to 100% by a child div.
Here is my HTML code:
<div id="parent">
<div id="child"></div>
</div>
Here is my CSS:
#parent {
position: absolute;
background-color: blue;
top: 2em;
left: 4em;
bottom: 3em;
right: 2em;
}
#child {
position: relative;
background-color: red;
height: 100%;
}
And here is a JSfiddle:
http://jsfiddle.net/XMS2G/1/
The problem is that in Internet Explorer 7, the browser does not cause the child div to expand to the entire parent div. How would I accomplish this without using Javascript?
Consider using position:absolute for child as well. And then just use top:0px; bottom:0px; right:0px; left:0px;
I think it will work.
You need to give the child position: absolute and set left, right, top, bottom to 0.
See it in action.
You'll likely have to set a hard-coded width for the parent DIV to get IE7 to behave nicely. the centering can be done with the "margin-left: auto;" "margin-right: auto;" css.