Question

我刚刚找到了创建粘性页脚的解决方案：

html {
    position: relative;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
}

虽然我想知道如何将position:relative放在html标记上。

我理解它的方式：而不是position: absolute相对于视口，它变得相对于文档。

这是好习惯吗？

Answer 1

虽然根元素html可以像任何其他元素一样由CSS设置，但某些属性可能因为它是根元素而表现不同。 position是其中一个属性：特别是spec可以这样说：

用户代理可以将位置视为“静态”和“静态”。在根元素上。

据我所知，没有现代浏览器实际这样做，但它仍然无法保证position: relative将始终在根元素上工作。在您的情况下，您可以通过在position: relative元素而不是body元素上设置html来避免这种情况：

body {
    position: relative;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
}

请注意，如果正文未达到视口的高度，则页脚不会粘到页面底部（例如，当页面中的内容不足时）。如果这是您的问题，请按照我的回答here中的说明在height和min-height设置html和body：

html {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
}

是否使用position：relative建议使用html标签？

1 个答案: