Question

Html是：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="wp-1-main.css">
    <title></title>
</head>
<body>
    <div class="wrapper">
        <div class="textArea"></div>
    </div>
    <div class="imageLine">
    </div>
</body>
</html>

，CSS是

.wrapper{
    width: 100%;
    height: 400px;
    position: fixed;
    top: 50%;
    margin-top: -200px;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    background-color: pink;
}

.imageLine{
    width: 500px;
    height: 1500px;
    float: right;
    margin-right: 60px;
    background-color: grey;

}

我的目标是使.imageLine覆盖一些.wrapper，并且包装器垂直居中，并且始终位于视口中。但是那些代码证明.wrapper覆盖了.imageLine。任何想法解决这个问题？

Answer 1

您可以使用z-index

较高的Z指数将出现在较低的Z指数之下。

为什么固定元素覆盖浮动元素？

1 个答案: