为什么z-index样式不适用于该元素？

时间：2015-08-20 03:50:39

标签： html css z-index document-body

z-index样式允许您控制绘制的订单框。例如，您可以将子元素绘制在其父元素下面：

＆＃13;
＆＃13; 
#parent {
  background: rgba(33, 33, 33, 0.7);
}
#child {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}
＆＃13; 
<div id="parent"><div id="child"></div></div>
＆＃13;
＆＃13;
＆＃13;

但是，当父元素是<body>标记时，它不再按预期运行：

＆＃13;
＆＃13; 
body {
  background: rgba(33, 33, 33, 0.7);
}
#child {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}
＆＃13; 
<body>
  <div id="child"></div>
</body>
＆＃13;
＆＃13;
＆＃13;

The CSS specification §9.9.1州（强调我的）：

  

根元素形成根堆叠上下文。其他堆叠上下文由任何定位元素（包括相对定位元素）生成，其具有计算值＆quot; z-index＆＃39;除了＆＃39; auto＆＃39;。堆叠上下文不一定与包含块有关。在未来的CSS级别中，其他属性可能会引入堆叠上下文，例如＆＃39; opacity＆＃39; [CSS3COLOR]。

     

在每个堆叠上下文中，以下按顺序绘制以下图层：

     
      
  1. 构成堆叠环境的元素的背景和边框。
    2.   
  2. 子堆叠上下文的堆栈级别为负（最多为负数）。
    3.   
  3. 流入的，非内联级别，未定位的后代。
    4.   
  4. 未定位的花车。
    5.   
  5. in-flow，内联级别，非定位后代，包括内联表和内联块。
    6.   
  6. 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
    7.   
  7. 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
    8.   

如果<body>是根元素，那么这种行为是有意义的，因为这意味着<body>元素总是先绘制，无论如何。

但是，在HTML文档中，<html>是根元素。鉴于此，为什么我们不能在<body>下使用z-index样式放置元素？

（这个问题的动机是similar question on the Russian Stack Overflow site。）

5 个答案:

答案 0 :(得分：7)

def connectionMade(self): def terminate(): self.terminateLater = None self.transport.abortConnection() self.terminateLater = reactor.callLater(60 * 5, terminate) def connectionLost(self, reason): delayedCall = self.terminateLater self.terminateLater = None if delayedCall is not None: delayedCall.cancel() 代码default positioning为<body>。根据定义，静态定位意味着忽略所有定位指令。

换句话说，因为z-index属性不适用于static的元素，所以它不适用于position:static，因为它的位置默认为body

关于为什么z-index不适用static

，这是一个很好的discussion
  

更新：那么为什么它不适用于身体{position：relative}？

因为position:static得到stacking context。现在使用z-index，元素只能相对于其body落后或前进，但从不在其父级后面。由于siblings是body元素，因此在其子项上设置负z-index不会将其置于正文之后。

答案 1 :(得分：4)

这里的问题是，如果html元素没有指定背景，画布将采用body元素的背景，并首先绘制。 CSS 2.1 says：

  

对于根元素为HTML＆＃34; HTML＆＃34;元素或XHTML   ＆＃34; HTML＆＃34;计算了＆＃39;透明＆＃39;的值的元素对于   ＆＃39;背景色＆＃39;并且没有＆＃39;对于＆＃39; background-image＆＃39;，用户代理必须   而是使用背景属性的计算值   元素的第一个HTML＆＃34; BODY＆＃34;元素或XHTML＆＃34; body＆＃34;元素孩子的时候   绘画画布背景，不得画背景   对于那个子元素。

看看当html元素被赋予背景时会发生什么：

＆＃13;
＆＃13; 
html { 
  background-color: white;
}

body {
  background: rgba(33, 33, 33, 0.7);
}
#child {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}
＆＃13; 
<body>
  <div id="child"></div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

很难找到关于这个问题的官方甚至权威的文档，可能是因为它不是一个常见的现实场景，但是之前已经讨论过 Ian Hickson 和 Tantek Celik ，CSS Specification的编辑。

以下是thread from a W3C mailing list的部分内容，其中规范编写者讨论z-index与body元素相关的行为。

讨论的实质是：

  • 浏览器在非定位元素（例如z-index）上忽略body是正确的，因为z-index仅适用于定位元素

  • 由于stacking contexts

    的创建，元素的z-indexing仅与兄弟元素相关，而与父元素无关
      

    ...子框无法规避其父级的z顺序。它可以   将自己放在任何兄弟姐妹的后面或前面，但它不能   把自己放在它的父盒子后面。它可以置身于这样一个世界   这是第一个孩子在任何其他孩子面前呈现的方式......

  • 还有一个有趣的说明z-index position: fixed与body元素的行为z-index，doesn't look like it was implemented。

Tantek Celik：

  

我对z-index财产有疑问：为什么我还能   看到我将放在 BODY元素后面的元素（参见示例）   下文）？

     

因为您的浏览器存在错误或者不支持z-index。

     

或者浏览器没有有错误并正确忽略z-index   在非定位元素上。

     

＆lt; BODY STYLE =＆＃34; z-index：0; background-color：＃456789;＆＃34;＆gt;
  ＆lt; P STYLE =＆＃34; z-index：-1; color：#fedcba;＆＃34;＆gt;这是一个显示文字的测试   因为它位于身体元素后面，所以不应该是可见的   ＆lt; EM＆gt;（＆＃34; z-index＆＃34;属性等于＆＃34; -1＆＃34;）。＆lt; / EM＆gt;
  ＆LT; / BODY＆GT;

     

在给出的示例中，z-index 的两个元素都没有   他们的位置属性设置，并根据：

     

http://www.w3.org/TR/REC-CSS2/visuren.html#z-index

     

z-index属性＆＃34;适用于：定位元素＆＃34;，设置   <{1}}属性上的内容将被忽略。

     

Tantek

来自规范编写者的

响应：

  

喜

     

（Tantek：我同意你的观点，z-index仅适用于{。}}   定位元素，但正如Ian所说，我不明白为什么它不适用于由于负边距而重叠的静态框。）

     

查看以下标记：

     

＆lt; body style =＆＃34; z-index = 0;背景颜色=绿色;＆＃34;＆GT;
  ＆lt; p style =＆＃34; z-index = -1;位置：相对;上：50;左：20＆＃34;＆gt;你好！！   ＆LT; / p为H.
  ＆LT; p为H.世界！！ ＆LT; / p为H.
  ＆LT; /体＆GT;

     

P是BODY的孩子，根据CSS2规范（我的阅读，无论如何   :)元素的z-indexing仅与兄弟元素相关，而且   不是父元素。这与创建z-index有关   上下文。

     

所以＆＃39;你好！＆＃39;会出现在世界的背后！＆＃39;   但不是BODY的框后面，因为BODY包含两个P元素   框。

     

!!!如果我错了，请纠正，因为如果我是，我必须这样做   重做我的渲染器，使其不尊重层次边界，   这不是一个快乐的情况。 !!!

     

这个主题的原意（问题）可以通过   将z-index=-1框设为position: fixed框（尽管如此）   定位属性会很复杂。）这会起作用，因为   固定的盒子突破了它们被发现的层次结构   漂浮到视口框，基本上成为了一个兄弟姐妹   BODY盒子。

     

- ranjit

spec writer：

  

请，

     请原谅我对实施具体条款的使用。

     

你对HTML假设是正确的。但我的观点仍然存在   即使我们查看文档/框结构的层次结构，也是有效的   无论标记如何。

     

目前，在我的实现中，以下隐式规则是   由生成的框的层次结构决定   解析分层文档结构（XML，HTML，...）

     

规则：子框不能绕过其父级的z顺序。它可以   将自己放在任何兄弟姐妹的后面或前面，但它不能   把自己放在它的父盒子后面。它可以置身于这样一个世界   这是第一个孩子在任何其他孩子面前呈现的方式，....

     

我看到CSS2规范暗示的这条规则，在哪里   有关z阶上下文等的讨论。

     

正如我所看到的，CHILD盒子的z顺序值在   父z阶上下文。这可以用绝对的方式来说明   定位框包含儿童的绝对定位框   绝对框具有不能违反z排序的z排序   父绝对盒子​​。

     

再次，让我说：如果我误解了规范中的某些内容，那就让我们说吧   我知道，因为如果上述规则无效，那么在我看来   对于非固定框，不保留层次结构的概念。

     

的问候，

     

- ranjit

http://lists.w3.org/Archives/Public/www-style/1999Aug/0131.html

答案 3 :(得分：0)

嗯，没有太多关于此的文档。

但是<body>标签不能有任何兄弟姐妹，那么为什么需要更改其z-index？

它是否被认为是一个定位的＆＃39;元件？

您可以根据需要使用其子元素z-index，并在任何情况下获得所需的结果，不需要使用css样式过度复杂化html而没有任何理由

答案 4 :(得分：-1)

static_cast标记默认为保留在堆栈的底部。它根本无法设置，因为它始终是最低的可能值。

来源：Adobe Forums

相关问题
最新问题