z-index 不适用于固定定位 [英] z-index not working with fixed positioning
问题描述
我有一个带有默认定位(即 position:static
)的 div
和一个带有 fixed
的 div
位置.
如果我设置元素的 z-indexes,似乎不可能让固定元素落后于静态元素.
#over {宽度:600px;z-索引:10;}#在下面 {位置:固定;顶部:5px;宽度:420px;左:20px;边框:1px 实心;高度:10%;背景:#fff;z-索引:1;}
<身体><div id="over">你好你好你好你好你好你好你好你好你好你好你好你好
<div id="下方">
</html>
或者在 jsfiddle 上:http://jsfiddle.net/mhFxf/
我可以通过使用来解决这个问题位置:绝对
在静态元素上,但谁能告诉我为什么会发生这种情况?
(似乎有一个与此类似的问题,(固定定位破坏 z-index) 但它没有一个令人满意的答案,因此我在这里用我的示例代码问这个)
这个问题可以通过多种方式解决,但实际上,了解堆叠规则可以让您找到最适合您的答案.
解决方案
<html>
元素是你唯一的堆叠上下文,所以只要遵循堆叠上下文中的堆叠规则,你就会看到元素是按这个顺序堆叠的
- 堆叠上下文的根元素(在本例中为
元素)
- 具有负 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)
- 非定位元素(按在 HTML 中的外观排序)
- z-index 值为 auto(按 HTML 中的外观排序)的已定位元素(及其子元素)
- 具有正 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)
所以你可以
- 设置 z-index 为 -1,对于
#under
定位 -ve z-index 出现在非定位#over
元素后面 - 将
#over
的位置设置为relative
,这样规则5就适用于它
真正的问题
在尝试更改元素的堆叠顺序之前,开发人员应该了解以下内容.
- 当堆叠上下文形成时
- 默认情况下,
元素是根元素,是第一个堆叠上下文
- 默认情况下,
- 堆叠上下文中的堆叠顺序
<小时>
当堆叠上下文形成时
- 当一个元素是文档的根元素时(
元素)
- 当元素的位置值不是 static 和 z-index 值不是 auto 时
- 当元素的不透明度值小于 1 时
- 几个较新的 CSS 属性也创建了堆叠上下文.其中包括:转换、过滤器、CSS 区域、分页媒体,以及其他可能的内容.https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- 作为一般规则,似乎如果 CSS 属性需要在屏幕外上下文中呈现,则它必须创建一个新的堆叠上下文.
堆叠上下文中的堆叠顺序
元素的顺序:
- 堆叠上下文的根元素(
元素默认是唯一的堆叠上下文,但任何元素都可以是堆叠上下文的根元素,参见上面的规则)
- 不能将子元素放在根堆叠上下文元素后面
- 具有负 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)
- 非定位元素(按在 HTML 中的外观排序)
- z-index 值为 auto(按 HTML 中的外观排序)的已定位元素(及其子元素)
- 具有正 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)
I have a div
with default positioning (i.e. position:static
) and a div
with a fixed
position.
If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.
#over {
width: 600px;
z-index: 10;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>
Or on jsfiddle here: http://jsfiddle.net/mhFxf/
I can work around this by using
position:absolute
on the static element, but can anyone tell me why this is happening?
(There seems to be a similar question to this one, (Fixed Positioning breaking z-index) but it doesn't have a satisfactory answer, hence I am asking this here with my example code)
This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.
Solutions
The <html>
element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order
- The stacking context’s root element (the
<html>
element in this case)- Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
- Non-positioned elements (ordered by appearance in the HTML)
- Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
- Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
So you can
- set a z-index of -1, for
#under
positioned -ve z-index appear behind non-positioned#over
element - set the position of
#over
torelative
so that rule 5 applies to it
The Real Problem
Developers should know the following before trying to change the stacking order of elements.
- When a stacking context is formed
- By default, the
<html>
element is the root element and is the first stacking context
- By default, the
- Stacking order within a stacking context
The Stacking order and stacking context rules below are from this link
When a stacking context is formed
- When an element is the root element of a document (the
<html>
element) - When an element has a position value other than static and a z-index value other than auto
- When an element has an opacity value less than 1
- Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
Stacking Order within a Stacking Context
The order of elements:
- The stacking context’s root element (the
<html>
element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)- You cannot put a child element behind a root stacking context element
- Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
- Non-positioned elements (ordered by appearance in the HTML)
- Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
- Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
这篇关于z-index 不适用于固定定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!