使用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

默认情况下，绝对位置是相对于主体的，因为绝对元素不在元素流之外。因此，如果您希望绝对元素能够“理解”其他元素并能够移动父元素的宽度，那么它的父元素应该处于相对位置。

无论您的 JSFiddle 相对于 .element 放置一个位置，.baby 都应该能够随其父级一起移动

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