CSS 绝对定位和正文滚动答案

【问题标题】：CSS Absolute positioning and body scrollingCSS 绝对定位和正文滚动
【发布时间】：2014-06-24 04:14:23
【问题描述】：

我需要在页面的右下角放置一个绝对 div。

.absolute{
   position: absolute;
   right:0;
   bottom: 0;
}

这可行，但在页面滚动的情况下，右侧/底部位置不是相对于正文宽度/高度，而是相对于可见区域（窗口）。

body{
    min-height: 600px;
    min-width: 600px;
}

我可以用 position:relative, width: 100%; 样式的包装 div 解决这个问题，但我失去了底部位置。

这就是我想要得到的：

【问题讨论】：

使用fixed 或static 代替absolute。
jsfiddle.net/WCLwH ?

标签： css css-position

【解决方案1】：

http://jsfiddle.net/WCLwH/1/

<body>
    <div class="red"></div>
    <div class="lime"></div>
</body>


<style type="text/css">
body {
  position: relative;
  border:solid 5px blue;
}
.red {
    position:relative;
    height:500px;
    width:200px;
    border:solid 5px red;
}
.lime {
    position:absolute;
    bottom:0px;right:0px;
    width:250px;height:150px;
    border:solid 5px lime;
}
</style>

“红框”中有很多内容，看起来像这样：http://jsfiddle.net/WCLwH/2/

【讨论】：

如果我将margin-bottom 添加到.red 并从body 中删除border，我将看到.lime 的底部位置与.red 相同。 // 抱歉英语不好 看到这个：jsfiddle.net/7gqkj8km

【解决方案2】：

只需为您的body 元素设置一个相对位置：

body {
  position: relative;
}

因为您的.absolute 元素将与它相关，而不是与视口相关。

【讨论】：