Question

我已修复<div>，在其上设置以下样式：

#mydiv {
    position: fixed;
    left: -150px;
    width: 150px;
    top: 0;
    bottom: 0;
    border: 1px solid #f00;
}

这会产生一个<div>，它位于屏幕外，大概与窗口的高度相同。

然后我将以下样式应用于<body>：

body {
    -webkit-transform: translate(150px, 0);
}

据我所知，这应该将身体150px向右移动，从而将#mydiv移动到视野中。这有效，但现在#mydiv是身体的高度，而不是窗口的高度。

这是一个Webkit错误吗？或者这是我做错了什么？

修改：

这似乎也发生在Firefox上。

Answer 1

这个问题的解决方案虽然可能不直接直观，但非常简单。

html, body {
    height: 100%;
}

通常，position: fixed元素相对于window（html元素的父元素）对齐。但是，当应用css变换时，position: fixed元素相对于应用了css变换的最近父变换对齐。

Webkit和其他浏览器可能采用的替代方法是将position: fixed元素与window对齐。但问题是position: fixed div在身体被转换时根本不会移动，所以div仍然会在屏幕外定位。