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.
Related
This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
i try toput diplay inline in relative positioned element heres the code
.parent{
height: 50px;
width: 130px;
background-color: red;
top: 100px;
position: relative;
display: inline;
}
but it just disappear
my question is why it do and what the relation between position and display
There is no connection between position and display. But, in your case. Change display: inline; to display: inline-block;, and the element will appear. Displayd inline element can ignore width and height and will be invisible without content.
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.
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
The content of hr tag flow around floating elements as if it is inline elements (even if it is actually blocks). That's what I need but unfortunately hr can't have child elements except two pseudo elements.
Take a look on this demo on JsFiddle: http://jsfiddle.net/P3KEZ/
<div id="right"></div>
<div class="divider"></div>
<hr class="divider" />
#right{
background: #ffaaaa;
width: 200px;
height: 300px;
float: right
}
.divider {
background: #4d9d4d;
height: 20px;
border: none;
position: relative;
}
.divider:after, .divider:before {
content: " ";
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
background: #a2a2f2;
top: 0;
}
divider:before {
left: 0;
}
.divider:after {
right: 0;
}
What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).
So question is: how to emulate such behaviour in div? (without display: flex)
What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).
So question is: how to emulate such behaviour in div?
You want to harvest the power of the mighty overflow property … (*thunderclap*)
.divider {
/* … */
overflow:hidden;
}
Normally, a block element is layed out behind a floating element, only its inline content floats next to the floated element – but with overflow:hidden you can change that, so that a block element like div only takes the space that is left beside the floating element. (It does not actually have to be hidden – everything besides the default value visible will trigger this behavior, so you can use auto or scroll as well if those suit your actual use-case better.)
See here: http://jsfiddle.net/P3KEZ/1/