在 div 上使用固定位置时出现意外行为

Question

我的 <body /> 有一个 <ion-nav-bar /> 和一个 <ion-nav-view />。在 <ion-view /> 的 <ion-content /> 中，我想添加一个 <div /> 来占据整个屏幕的宽度和高度（即完全覆盖所有其他元素），因此我添加了以下样式：

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

奇怪的是，<div /> 的顶部并没有到达屏幕的顶部，而是到达了 <ion-nav-bar /> 的底部。知道为什么吗？

这是一个你可以玩的 plunker：http://plnkr.co/edit/q2iynXaMnTZ2fGqzlJZo。您会看到红色边框没有覆盖 header。查看 home.html 和 style.css 文件。

我一定是对固定位置有什么误解，我认为宽度是一个固定位置，一个元素是相对于浏览器定位的window。那我哪里错了？以及如何让我的固定 <div /> 占据整个屏幕？

Answer 1

您的理解是正确的，但是，当您在祖先上使用 transform 时，固定位置的后代相对于它定位。

所以因为这个（你的固定元素的祖先）：

<div style="transform: translate3d(0px, 0px, 0px) scale(1);" class="scroll padding">

正在使用transform，固定元素坐标是相对于这个div的大小。如果您要删除转换，您将获得预期的结果。

在 div 上使用固定位置时出现意外行为

Unexpected behavior when using a fixed position on a div

html

css

fixed

css-position

ionic-framework