CSS + HTML 使用 z-index 的分区分层出错

Question

我对 HTML/CSS 中的 div 和 z-index 有疑问。这是 HTML:

<div class="banner">
        <div class="banner-lijnen">
            <div class="banner-vervaging">
                <div class="banner-images">
                    <img src="images/home/banner/home1.jpg" width="1185px" height="465px" />
                </div>

            </div>

    </div>

这是 CSS:

 div {position:relative; 
 }
        .banner {height: 465px;
             background: #262262;
             width:100%;
             z-index: 3;}

    .banner-container {height:465px;
                      width:1185px;
                        float: none;
                        margin:0px auto;
    }
    .banner-vervaging {
        background-image: url('images/home/banner/overgang.png');
        width:1185px;
        float:none;
        margin: 0px auto;
        margin-top: -20px !important;
        height: 465px;
        background-size: contain;
    }
    .banner-lijnen {
        width: 100%;
        height: 425px;
        border-bottom: 20px solid rgba(144, 142, 173, 0.5);
        border-top: rgba(255, 255, 255, 0.5) solid 20px;
    }
    .banner-images {
        width:1185px;
        height: 465px;
        z-index: -2;}

问题是，.banner-lijnen 必须在顶部，在那个 .banner-vervaging 之下，在那个 .banner-images 和它的内容之下。但我唯一能做的就是在所有内容下使用 .banner-images，在其余部分之上使用 .banner-vervaging。 (http://www.bgc-testomgeving.nl/wal) 是我正在谈论的网站的 link。

你好，

布鲁斯

Answer 1

我认为元素不可能出现在其父元素后面，具有负 z-index 的元素除外（出现在所有其他元素后面）。您的 .banner 元素的 z-index 为 3 .. 我猜是因为您希望该元素出现在所有其他元素之上。但是 banner-lijnen 和 banner-vervaging 是没有指定 z-index 的嵌套元素，所以它们不会出现在 banner（它们的父元素）后面。

因此，有两个选择：1) 使所有 div 处于同一级别； 2) 为 banner-lijnen 和 banner-vervaging.

指定负 z-index

Answer 2

嵌套元素不能在其父元素之上进行 z 索引。见

https://css-tricks.com/almanac/properties/z/z-index/

要解决您的问题，请将 banner-images div 设置为与 banner-lijnen div 同级的同级：

<div class="banner">
    <div class="banner-images">
        <img src="images/home/banner/home1.jpg" width="1185px" height="465px" />
    </div>
    <div class="banner-lijnen">
        <div class="banner-vervaging">
        </div>
    </div>
</div>

在您的 css 中，将所有 div 设置为 position:relative 除了横幅图像，横幅图像应该是 position:absolute;top:0;left:0;bottom:0;width:100%; 或类似的东西。然后您可以使用 z-index 将 div 放置在彼此之上。

jsFiddle Demo

用position:absolute使它们成为兄弟姐妹也没有问题，然后使用z-index根据需要定位它们：

<div class="banner">
    <div class="banner-images">
        <img src="images/home/banner/home1.jpg" width="1185px" height="465px" />
    </div>
    <div class="banner-lijnen"></div>
    <div class="banner-vervaging"></div>
</div>

CSS + HTML 使用 z-index 的分区分层出错

CSS + HTML division layering with z-index goes wrong

html

css

css-position

z-index