Question

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

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

这样可行，但是页面滚动时，右/底位置与身体宽度/高度无关，而是相对于可见区域（窗口）。

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

我可以使用样式position:relative, width: 100%;的包装div解决此问题，但我失去了最低位置。

我想得到：

Page absolute positioning

Answer 1

只需为body元素设置相对位置：

body {
  position: relative;
}

因为你的.absolute元素将相对于它而不是视口。

Answer 2

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>

并在＆＃34;红色框＆＃34;中包含大量内容它看起来像这样：http://jsfiddle.net/WCLwH/2/

CSS绝对定位和正文滚动

2 个答案: