html - CSS + HTML 分区分层与 z-index 出错

Question

我在使用 z-index 的 HTML/CSS 中遇到 div 问题。这是 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 ) 是指向我正在谈论的网站的链接。

问候，

布鲁斯

Answer 1

嵌套元素不能在其父元素之上进行 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使它们成为 sibling 也没有问题，然后使用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>