时间戳

首页 > 解决方案 > 即使提到绝对位置，z-index 也不起作用？

z-index - 即使提到绝对位置，z-index 也不起作用？

问题描述

我正在尝试将叠加层放在展示图像之上，并使用 将文本放在叠加层之上的图像上z-index，但z-index: 1不起作用。添加绝对位置，然后z-index:1创建叠加效果，但没有任何反应。有人可以检查一下，这是怎么回事？我已经设置了绝对位置并给出了它的顶部，左侧位置用于叠加

<!DOCTYPE html>
<html>
<head>
    <title>My website2</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

    <header>
        <div class="container">
            <h2 > <span class="coral">Acme</span> Web Design</h2>
                <nav>
                    <ul class="my-list">
                        <li >
                            <a class="coral" href="#"> HOME</a>
                        </li>
                        <li>
                            <a href="#"> ABOUT</a>
                        </li>
                        <li>
                            <a href="#"> SERVICES</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>


        <section id="showcase">
            <div class="container">
                <h2>Lorem ipsum dolor sit amet consectetur
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing         
                </p>
            </div>
        </section>

        

    </body>
    </html>



.container{
    width:80%;
    margin: auto;
    overflow: hidden;
}

header{
    background-color: #35424a;
    color: #fff;
    min-height: 45px;
    padding-top: 20px;
    border-bottom: 3px solid coral;
}

header ul{
    margin:0;
    padding:0;
}


header li{
    display: inline;
    list-style: none;
    padding:0 15px 0 15px ;


}


header h2{
    float: left;
}


header nav{
    float:right;
}

header h2{
    margin: 0;
}
.coral{
    color:coral;
}



#showcase{
    background-image: url("images/showcase2.jpg");
    background-position: center right;
    min-height: 300px;
    text-align: center;
    color: #fff;
    
    
}

#showcase::after {
    content: "";
    position: absolute;
    top:68px;
    left:0;
    width: 100%;
    min-height:300px;
    background-color: rgba(78, 89, 107, 0.6);
        

}

#showcase {

z-index:1;  
}

标签： z-index

解决方案

现在已经解决了。Z-index 需要添加到包含 h2 和 p 标签的容器类上。


#showcase{
    position: relative;
background-image:url("images/showcase.jpg") ; 
background-size:cover;
background-repeat: no-repeat;
background-position: center right;
    min-height: 300px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    display: flex;
        align-items: center;
        justify-content: center;
}




#showcase::after {
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    min-height:300px;
    background-color: rgba(78, 89, 107, 0.8);

}

.container{
    z-index: 10;
}

推荐阅读