如何在可滚动区域中定位绝对？（CSS）答案

【问题标题】：How to position absolute in scrollable area? (Css)如何在可滚动区域中定位绝对？（CSS）
【发布时间】：2014-07-04 17:17:40
【问题描述】：

我有一个棘手的 CSS 问题：我有这个 HTML 和 CSS：

.mark {
     height: 30px;
     width: 30px;
     background: red;
     position: absolute;
     left: 30px;
     bottom: 30px;
 }

我想让红框保持在定义位置，但是当我滚动时，它会移动！
我该如何解决这个问题？

【问题讨论】：

你能把你的问题解释清楚吗？
嗯，你应该把标记放在滚动区域之外，但我不确定你想要达到什么目的
问题很模糊，你要红色方块在哪里？
我对此进行了测试，但我希望 mark 相对于 contentArea。固定位置将 mar 与页面（正文元素）相关联我希望 mark 元素留在 contentArea

【解决方案1】：

试试这个.. 这可能不是一个好方法。但会给你想要的结果。

我将div mark 放在另一个div 并给予

.mark {
    height: 30px;
    width: 30px;
    background:red;
    position: fixed;
}

【讨论】：

【解决方案2】：

你用过absolute，用fixed代替

.mark {
    height: 30px;
    width: 30px;
    background: red;
    position: fixed;
    left: 30px;
    bottom: 30px;
}

【讨论】：

【解决方案3】：

使用position : fixed 和.mark 元素的顶部引用

例子：

.mark {
    height: 30px;
    width: 30px;
    background: red;
    position: fixed;
    left: 30px;
    top:150px;
}

【讨论】：

【解决方案4】：

更改 position 属性的值 fixed 而不是 absolute 并尝试。

【讨论】：

我测试 bau i wana 到 mark 相对于 contentArea。固定位置将 mar 与页面（正文元素）相关联我希望 mark 元素留在 contentArea

【解决方案5】：

.mark {
height: 30px;
width: 30px;
background: red;
position: fixed;
left: 30px;
bottom: 30px;
}

【讨论】：