Question

我的div位置：固定，但是当我滚动底部的窗口时，div与页脚重叠。我不希望div与页脚重叠。

我应该对CSS进行哪些更改以克服该问题。

a.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="a.css">
    </head>
    <body>
        <div class="contain">
            <div class="data1"></div>
            <div class="data"></div>
        </div>
        <div class="footer"></div>
    </body>
</html>

a.css

.contain {
    margin-bottom: 35rem;
}
.data {
    background-color: red;
    width: 30%;
    margin-top: -33%;
    position: fixed;
    height: 600px;
}

.data1 {
    width: 30%;
    height: 500px;
    margin-left: 60%;
    background-color: black;
}

.footer {
    background-color: blue;
    width: 100%;
    height: 150px;
    bottom: 0;
}

Answer 1

只需将fixed替换为sticky。请修改以下代码，然后查看适合您的代码：

.contain {
/*     margin-bottom: 35rem; */
}
.data {
    background-color: red;
    border: 4px solid black;
    width: 30%;
    bottom: 30%;
    position: sticky;
    height: 300px;
}

.data1 {
    width: 30%;
    height: 500px;
    margin-left: 60%;
    background-color: black;
}

.footer {
    background-color: blue;
    width: 100%;
    height: 350px;
    bottom: 0;
}

固定div重叠的内容？

1 个答案: