修复了 div 重叠内容？答案

【问题标题】：Fixed div overlapping content?修复了 div 重叠内容？
【发布时间】：2019-07-06 18:07:40
【问题描述】：

我有一个位置：固定的 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;
}

【问题讨论】：

请分享您的代码，这将有助于理解问题。
@bart 添加了我的代码
只是将否定的margin-top 增加到34%?
对不起，我的意思是-34%

标签： html css

【解决方案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 保持固定而下部 div 滚动的位置。
是的。而已。谢谢。另一个朋友让我构建了多个 div。您的解决方案与我想象的一样简单。必须研究它才能理解你做了什么。