CSS z-index 不适用于固定定位

Question

提问by DanSingerman

I have a divwith default positioning (i.e. position:static) and a divwith a fixedposition.

我有一个div默认定位（即position:static）和div一个fixed位置。

If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.

如果我设置元素的 z-indexes，似乎不可能让固定元素落后于静态元素。

    #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/

或者在 jsfiddle 上：http: //jsfiddle.net/mhFxf/

I can work around this by using position:absoluteon the static element, but can anyone tell me whythis is happening?

我可以通过position:absolute在静态元素上使用来解决这个问题，但是谁能告诉我为什么会这样？

(There seems to be a similar question to this one, (Fixed Positioning breaking z-index) but it dosen't have a satisfactory answer, hence I am asking this here with my example code)

（似乎有一个与此类似的问题，（固定定位破坏 z-index）但它没有令人满意的答案，因此我在这里用我的示例代码问这个问题）

Answer 1

采纳答案by Mr_Moneybags

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

该<html>元素是你唯一的叠加背景下，所以只要按照堆叠环境内堆叠规则，你会看到，元素顺序堆叠

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)

堆叠上下文的根元素（<html>本例中的元素）
具有负 z-index 值的定位元素（及其子元素）（较高的值堆叠在较低值的前面；具有相同值的元素根据 HTML 中的外观堆叠）
非定位元素（按在 HTML 中的外观排序）
z-index 值为?auto? 的定位元素（及其子元素）（按在 HTML 中的外观排序）
具有正 z-index 值的定位元素（及其子元素）（较高的值堆叠在较低值的前面；具有相同值的元素根据 HTML 中的外观堆叠）

So you can

这样你就可以

set a z-index of -1, for #underpositioned -ve z-index appear behind non-positioned #overelement
set the position of #overto relativeso that rule 5 applies to it

将 z-index 设置为 -1，对于#under定位 -ve z-index 出现在非定位#over元素之后
将的位置设置#over为relative使规则 5 适用于它

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
Stacking order within a stacking context

当堆叠上下文形成时
- 默认情况下，<html>元素是根元素，是第一个堆叠上下文
堆叠上下文中的堆叠顺序

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.

当一个元素是文档的根元素（<html>元素）
当元素的位置值不是 static 和 z-index 值不是 auto 时
当元素的不透明度值小于 1 时
几个较新的 CSS 属性也创建了堆叠上下文。这些包括：转换、过滤器、css-regions、分页媒体，以及其他可能的。https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
作为一般规则，似乎如果 CSS 属性需要在屏幕外上下文中呈现，则它必须创建一个新的堆叠上下文。

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)

堆叠上下文的根元素（<html>默认情况下该元素是唯一的堆叠上下文，但任何元素都可以是堆叠上下文的根元素，请参见上面的规则）
- 您不能将子元素放在根堆叠上下文元素后面
具有负 z-index 值的定位元素（及其子元素）（较高的值堆叠在较低值的前面；具有相同值的元素根据 HTML 中的外观堆叠）
非定位元素（按在 HTML 中的外观排序）
z-index 值为?auto? 的定位元素（及其子元素）（按在 HTML 中的外观排序）
具有正 z-index 值的定位元素（及其子元素）（较高的值堆叠在较低值的前面；具有相同值的元素根据 HTML 中的外观堆叠）

Answer 2

回答by stephenmurdoch

Add position: relative;to #over

添加position: relative;到#over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #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>

Fiddle

小提琴

Answer 3

回答by cusimar9

z-indexonly works within a particular context i.e. relative, fixedor absoluteposition.

z-index仅适用于特定上下文，即relative，fixed或absolute位置。

z-indexfor a relative div has nothing to do with the z-indexof an absolutely or fixed div.

相对 div 的z-index与z-index绝对或固定 div无关。

EDIT~~This is an incomplete answer.~~This answer provides false information. Please review @Dansingerman's comment and example below.

编辑~~这是一个不完整的答案。~~这个答案提供了虚假信息。请查看下面@Dansingerman 的评论和示例。

Answer 4

回答by iamserious

since your overdiv doesn't have a positioning, the z-index doesn't know where and how to position it (and with respect to what?). Just change your over div's position to relative, so there is no side effects on that div and then the under div will obey to your will.

由于您的overdiv 没有定位，因此 z-index 不知道在哪里以及如何定位它（以及关于什么？）。只需将您的上方 div 的位置更改为相对位置，这样就不会对该 div 产生副作用，然后下方 div 将服从您的意愿。

here is your example on jsfiddle: Fiddle

这是您在 jsfiddle 上的示例：Fiddle

edit: I see someone already mentioned this answer!

编辑：我看到有人已经提到了这个答案！

Answer 5

回答by Carlos Precioso

Give the #undera negative z-index, e.g. -1

给出#under一个否定z-index，例如-1

This happens because the z-indexproperty is ignored in position: static;, which happens to be the default value; so in the CSS code you wrote, z-indexis 1for both elements no matter how high you set it in #over.

发生这种情况是因为该z-index属性在中被忽略position: static;，而这恰好是默认值；所以在你写的CSS代码，z-index是1两种元素，无论你有多高的设置#over。

By giving #undera negative value, it will be behind any z-index: 1;element, i.e. #over.

通过给出#under负值，它将在任何z-index: 1;元素之后，即#over。

Answer 6

回答by thedanotto

I was building a nav menu. I have overflow: hiddenin my nav's css which hid everything. I thought it was a z-index problem, but really I was hiding everything outside my nav.

我正在构建一个导航菜单。我overflow: hidden在导航的 css 中隐藏了所有内容。我认为这是一个 z-index 问题，但实际上我将所有内容隐藏在我的导航之外。

Answer 7

回答by Khoa Nguyen

When elements are positioned outside the normal flow, they can overlap other elements.

当元素位于正常流之外时，它们可以与其他元素重叠。

according to Overlapping Elements section on http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

根据http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp上的重叠元素部分

Answer 8

回答by Bakhshi

the behaviour of fixed elements (and absolute elements) as defined in CSS Spec:

CSS Spec 中定义的固定元素（和绝对元素）的行为：

They behave as they are detached from document, and placed in the nearest fixed/absolute positioned parent. (not a word by word quote)

它们的行为就像它们与文档分离一样，并放置在最近的固定/绝对定位的父级中。（不是逐字引用）

This makes zindex calculation a bit complicated, I solved my problem (the same situation) by dynamically creating a container in body element and moving all such elements (which are class-ed as "my-fixed-ones" inside that body-level element)

这使得 zindex 计算有点复杂，我通过在 body 元素中动态创建一个容器并移动所有这些元素（在该 body 级元素中被归类为“我的固定元素”）解决了我的问题（相同的情况） )

CSS z-index 不适用于固定定位

提问by DanSingerman

采纳答案by Mr_Moneybags

Solutions

解决方案

The Real Problem

真正的问题

When a stacking context is formed

当堆叠上下文形成时

Stacking Order within a Stacking Context

堆叠上下文中的堆叠顺序

回答by stephenmurdoch

回答by cusimar9

回答by iamserious

回答by Carlos Precioso

回答by thedanotto

回答by Khoa Nguyen

回答by Bakhshi

相关推荐

最近更新

标签

CSS z-index 不适用于固定定位

提问by DanSingerman

采纳答案by Mr_Moneybags

Solutions

解决方案

The Real Problem

真正的问题

When a stacking context is formed

当堆叠上下文形成时

Stacking Order within a Stacking Context

堆叠上下文中的堆叠顺序

回答by stephenmurdoch

回答by cusimar9

回答by iamserious

回答by Carlos Precioso

回答by thedanotto

回答by Khoa Nguyen

回答by Bakhshi

相关推荐

CSS -moz- 和 -webkit- 是什么？

CSS 如何在无序列表中将 li 元素内的文本居中

CSS Firefox 是否支持位置：相对于表格元素？

CSS 将 div 与其容器底部对齐

相关推荐

最近更新

标签