我应该知道有关z-index的任何怪异规则吗? [英] Any weird rules about z-index I should know about?

问题描述

对不起，我无法发布完整的代码，我正在研究专有的东西.基本上，我有一个问题，其中z索引为6的DIV被z索引为5的叠加DIV阻止了.是否有任何情况会发生这种情况?我竭尽全力试图弄清楚为什么会这样.只是没有任何意义.可能与嵌套DIV或CSS position有什么关系?

Sorry I can't post complete code, I'm working on proprietary stuff. Basically I have a problem where a DIV that has z-index 6 is being blocked by an overlay DIV that has a z-index of 5. Is there ANY scenario that would make this happen? I'm wracking my brain trying to figure out why this is happening. It just doesn't make any sense. Anything having to do with nesting DIVs, or CSS position maybe?

我为您的模糊性表示歉意.我试图在JSFiddle中重新创建，但不幸的是，它可以按预期工作.只有实际的代码很奇怪.

I apologize for the vagueness. I tried to recreate in JSFiddle but it works as expected, unfortunately. Only the actual code is wonky.

结构:

<div id="window">
    <div id="wall">
        <div class="box" /><div class="box" /> .... many boxes
    </div>
</div>
<div id="overlay" />

CSS:

#window {
    position: relative;
    width: 960px;
    height: 700px;
    overflow: hidden;
    background: #666;
}

#wall {
    position: relative;
    width: 1640px;
    height: 1600px;
    -webkit-perspective: 2000;
}

#overlay {
    position: absolute;
    z-index: 5;
    background: #000;
}

.box {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 228px;
    height: 228px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    -webkit-transform-style: preserve-3d;
    z-index: 4;
    cursor: pointer;
}

在某些事件下通过jQuery设置覆盖尺寸:

Overlay dimensions are set via jQuery upon a certain event:

        $('<div id="overlay"></div>').css({
            'left': $('#window').position().left + 'px',
            'top': $('#window').position().top + 'px',
            'width': $('#window').width() + 'px',
            'height': $('#window').height() + 'px',
            'opacity': 0.8
        }).appendTo('body');

即使其中一个框的z索引为6，并且叠加层为5，叠加层仍位于该框上.

Even though one of the boxes has a z-index of 6, and the overlay is 5, the overlay is still over said box.

该叠加层应该会越过窗口，但让其中一个盒子通过.

The overlay is supposed to go over the window, but let one of its boxes through.

为什么这个JSFiddle可以正常工作，但是我的实际代码却不能工作呢? http://jsfiddle.net/csaltyj/2gzTc/

Why the heck does this JSFiddle work but my actual code does not?! http://jsfiddle.net/csaltyj/2gzTc/

推荐答案

z-index仅适用于具有position: relative，absolute或fixed的元素.这似乎使很多人绊倒.

z-index only works on elements with position: relative,absolute, or fixed. That seems to trip many people up.

此外，孩子永远不能低于其父母. 此示例，也在 Jsfiddle 对此进行了说明.

In addition, a child can never be below its parent. This example, also on Jsfiddle illustrates it.

根据您添加的示例，您显然会遇到麻烦:

Based on the example you added it's clear the trouble you're having:

z-index仅相对于其父项，在大多数情况下是其自身.如果一个同胞的z-index低于另一个同胞，则您对第一个同胞的孩子的任何更改都不会将其移到其父同胞之上.详细了解

z-index is only relative to its parent, which in most cases is the document itself. If the z-index of one sibling is lower than another, nothing you change about first sibling's children can move it above its parents sibling. Read more about stacking context if you're interested.

这是视觉效果:

您想要做的是用红色划线，并且CSS不可能做到这一点(考虑到那些小盒子是大盒子的孩子，带有标记的外观可能像这样:

Crossed out in red is what you want to do, and it is not possible with CSS (considering those small boxes are children of the bigger box, with markup which might look like this:

<div class="one">
</div>
<div class="two">
     <div> I can never be above "one", if my parent "two" isn't. </div>
</div>

一种解决方案是将覆盖物"移到墙内，或者最好使用伪元素(将其作为应用该元素的子元素渲染)，因为该覆盖物听起来像是一种呈现形式，并且因此，如果overlay div不添加语义，则应保留在CSS领域.

A solution would be to move the "overlay" inside the wall, or better yet use a pseudo element (which is rendered as a child of the element it is applied to), because the overlay sounds like it something presentational, and thus should remain in the domain of CSS if an overlay div would add no semantic meaning.

这篇关于我应该知道有关z-index的任何怪异规则吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！