使用CSS视口高度和子绝对定位创建固定定位？

Question

目标

我想绝对定位一个元素。

问题

奇怪的是，所说的元素看起来好像是position: fixed。怪异！

    html, body {
        height:100%;
    }
    .absolute {
        position:absolute;
    }

这会创建一个在页面上固定的元素。

这非常令人费解和不方便。这是JSfiddle。

帮助

有没有办法可以在不更改html和body高度的情况下为此元素添加绝对定位？

最后要注意的一点是：在我的情况下，身体内部的内容溢出窗口高度，如果这很重要......

感谢您的帮助！

编辑：稍微更改了标题，删除了不需要的插入内容。

Answer 1

首先让我们了解position:absolute的工作原理。

absolute位置从文档的正常流中删除元素，并将其放置在相对于relative定位的第一个父级的位置。

position属性的默认值为static。因此，班级.absolute没有定位relatively的父级。因此，它相对于视口保持不变，即使滚动也会一直显示。

因此，将.absolute的父元素设置为relative定位，您将获得所需的结果。在这里，您可以将.element设置为relative定位。

.element{
   width:100%;
   height:2000px;
   position:relative;
}

您可以打开下面的小提琴并滚动查看所需的效果。

小提琴 - jsFiddle

Answer 2

默认位置绝对是相对于身体的，因为绝对元素不在元素流中。因此，如果你希望你的绝对元素能够变得容易理解＆＃34;其他元素并且能够移动宽度父母，它的父母应该处于相对位置。

无论你的JSFiddle放置一个相对于.element的位置，.baby都应该能够与它一起移动

.element {
    width:100%;
    height:2000px;
    position:relative;
}