This question already has answers here:
Do <span> elements with "position: absolute;" behave as block-level elements?
(2 answers)
Closed 2 years ago.
Today I faced an interesting problem at work.
When I style an inline-element with position:absolute or fixed it behaves like a block-element which can have a height and with.
Here a short example:
span {
background: red;
height: 100px;
width: 100px;
}
span#absolute {
position: absolute;
top:30px;
left:30px;
}
<span>Inline</span>
<span id="absolute">Inline, too</span>
As you can see both spans have height and width (which should be ignored on inline-elemens). However it gets applied when using posision:absolute.
So my question: Is the second span behaving like display:block completely or is it just a semi-block-behaviour?
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo:
The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:
2. […] if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below.
And in that mentioned table below, you see that for the specified value inline (which span has by default from the user agent stylesheet), the computed value is … block
Per Chrome's computed styles on span#absolute, the element has a display:block property.
Related
So if I understand z-index correctly, it would be perfect in this situation:
I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
doesn't work either. Neither does a combination of anything like this. How come?
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.
If you set position to other value than static but your element's z-index still doesn't seem to work, it may be that some parent element has z-index set.
The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.
So with following html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div>
no matter how big the z-index of el3 will be set, it will always be under el1 because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3 is actually 3.8 which is lower than 5.
If you want to check stacking contexts of parent elements, you can use this:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
There is a great article about stacking contexts on MDN
Your elements need to have a position attribute. (e.g. absolute, relative, fixed) or z-index won't work.
In many cases an element must be positioned for z-index to work.
Indeed, applying position: relative to the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).
Actually, position: fixed, position: absolute and position: sticky will also enable z-index, but those values also change the layout. With position: relative the layout isn't disturbed.
Essentially, as long as the element isn't position: static (the default setting) it is considered positioned and z-index will work.
Many answers to "Why isn't z-index working?" questions assert that z-index only works on positioned elements. As of CSS3, this is no longer true.
Elements that are flex items or grid items can use z-index even when position is static.
From the specs:
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.
5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.
Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Make sure that this element you would like to control with z-index does not have a parent with z-index property, because element is in a lower stacking context due to its parent’s z-index level.
Here's an example:
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
// CSS //
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
In the example above, the modal has a higher z-index than the content, although the content will appear on top of the modal because "content" is the parent with a z-index property.
Here's an article that explains 4 reasons why z-index might not work:
https://coder-coder.com/z-index-isnt-working/
Z-index needs these to work:
Position: relative, absolute, fixed, ..
Make sure that the parent element hasn't overflow: hidden;
I have had the same problem with z-index
and you believe me or not it's fixed just by setting the background color
like this
background-color: white;
If all else fails, look for syntax errors in your HTML. It's not intuitive, but I've seen it be the reason why z-index doesn't work.
The following code has invalid HTML syntax:
<div class="over"/>
<div class="under"/>
...(it's is invalid syntax because a div isn't a self closing tag).
CSS properties that were applied to these rogue HTML elements, such as background-color: black, position: fixed, width: 150px, and top:150px, were all working as expected. However, the z-index: 2 property wasn't working under the exact same conditions.
Only when the invalid HTML was fixed did the z-index work correctly.
I'm not sure why z-index was pickier than the other CSS attributes, but maybe this answer can help someone.
In my case I had my Navbar's opacity to 0.9, I got my answer from codercoder.com, as I removed the opacity property from my Navbar's css, z-index worked
just give position other that static. And u should give both container a position than it will work.
So if I understand z-index correctly, it would be perfect in this situation:
I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
doesn't work either. Neither does a combination of anything like this. How come?
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.
If you set position to other value than static but your element's z-index still doesn't seem to work, it may be that some parent element has z-index set.
The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.
So with following html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div>
no matter how big the z-index of el3 will be set, it will always be under el1 because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3 is actually 3.8 which is lower than 5.
If you want to check stacking contexts of parent elements, you can use this:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
There is a great article about stacking contexts on MDN
Your elements need to have a position attribute. (e.g. absolute, relative, fixed) or z-index won't work.
In many cases an element must be positioned for z-index to work.
Indeed, applying position: relative to the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).
Actually, position: fixed, position: absolute and position: sticky will also enable z-index, but those values also change the layout. With position: relative the layout isn't disturbed.
Essentially, as long as the element isn't position: static (the default setting) it is considered positioned and z-index will work.
Many answers to "Why isn't z-index working?" questions assert that z-index only works on positioned elements. As of CSS3, this is no longer true.
Elements that are flex items or grid items can use z-index even when position is static.
From the specs:
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.
5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.
Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Make sure that this element you would like to control with z-index does not have a parent with z-index property, because element is in a lower stacking context due to its parent’s z-index level.
Here's an example:
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
// CSS //
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
In the example above, the modal has a higher z-index than the content, although the content will appear on top of the modal because "content" is the parent with a z-index property.
Here's an article that explains 4 reasons why z-index might not work:
https://coder-coder.com/z-index-isnt-working/
Z-index needs these to work:
Position: relative, absolute, fixed, ..
Make sure that the parent element hasn't overflow: hidden;
I have had the same problem with z-index
and you believe me or not it's fixed just by setting the background color
like this
background-color: white;
If all else fails, look for syntax errors in your HTML. It's not intuitive, but I've seen it be the reason why z-index doesn't work.
The following code has invalid HTML syntax:
<div class="over"/>
<div class="under"/>
...(it's is invalid syntax because a div isn't a self closing tag).
CSS properties that were applied to these rogue HTML elements, such as background-color: black, position: fixed, width: 150px, and top:150px, were all working as expected. However, the z-index: 2 property wasn't working under the exact same conditions.
Only when the invalid HTML was fixed did the z-index work correctly.
I'm not sure why z-index was pickier than the other CSS attributes, but maybe this answer can help someone.
In my case I had my Navbar's opacity to 0.9, I got my answer from codercoder.com, as I removed the opacity property from my Navbar's css, z-index worked
just give position other that static. And u should give both container a position than it will work.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Example:
https://codepen.io/229075284/pen/aboQVXZ
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
<div class="outer">
<div class="inner"></div>
</div>
When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.
So I am wondering why the extra space appears?
I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.
You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.
The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.
Your question has nothing to do with line-height or `overflow'.
Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.
I have a parent and a child elements:
.parent {
will-change: transform;
overflow: hidden;
position: absolute;
}
.child {
position: fixed;
top: 80px;
left: 80px;
}
without will-change:transform style, .child element regardless of parent's position and overflow:hidden will be positioned based on window.
Now that the .parent has this style, not only top and left of .child calculate from .parent, but also overflow:hidden applies on .child too.
It seems that position:fixed will be totally ignored if we add will-change:transform
Take a look here: https://jsbin.com/beluweroti/1/edit?html,css,output
Note: I don't add this style to .parent, so I cannot simply remove it.
I can deal with positioning, and set correct left and top, but the question is
how can I ignore overflow:hidden for fixed-positioned children?
From the specification:
If any non-initial value of a property would cause the element to generate a containing block for fixed positioned elements, specifying that property in will-change must cause the element to generate a containing block for fixed positioned elements
So basically you are facing the issue with transform and not the will-change because:
For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.ref
So transform is creating a containing block for fixed position element and will-change should do the same and since the .parent is now the containing block of the fixed element it will also apply its overflow on it.
Basically you can do nothing if you cannot remove the will-change property or change its value from .parent
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I tried to set a img before my option field.
I tried
option::before
{
display: inline-block;
width: 16px;
height: 16px;
background-image: url();
}
But it doesn´t work. How to do it?
It is not displayed in Firefox inspector. Normally there should be displayed ::before
Pseudo selectors are like empty DOM elements. And any element to be styled needs to have some content.
Your ::before pseudo element needs some content, which you can simply fill in using 'content' property.
option::before {
content: '';
display: inline-block;
...
}
Also note, you can use 'content' property to any HTML DOM element.
And for pseudo selectors, they need to have a 'display' property along, unless positioned absolute or fixed.