并排固定的 div - 一个覆盖另一个答案

【问题标题】：Side by side fixed divs - one is overriding the other并排固定的 div - 一个覆盖另一个
【发布时间】：2016-07-15 13:02:02
【问题描述】：

http://codepen.io/justinturner/pen/VjyWJE

链接的 codepen 有一个固定的标题 div。

单击汉堡图标时，我正在使用 javascript 在左侧添加一个菜单 div。这也是一个固定的div。

添加菜单 div 后，标题 div 似乎恢复到相对定位，并跳转到主要内容 div 的顶部。向下滚动一根头发，然后点击汉堡，你就会明白我的意思了。

我在这里遇到了什么问题？当用户单击汉堡包时，我希望标题保持固定并像其他内容一样直接向右翻译。

<em>too much code to paste</em>

【问题讨论】：

标签： javascript html css

【解决方案1】：

根据 spec 和其他 similar questions 这里的 SO，固定元素和翻译不能“播放”在一起。

作为一种解决方法，您可以：

1) 使用转换（例如在左侧属性上）而不是变换（translateX）

2) 从使用变换的容器中移除 position:fixed 按钮

按照上面的第一个建议（使用left 而不是translateX），将您的代码编辑为以下内容，问题应该不再存在。

.o-wrapper.has-push-left {
    left: 300px;
}
.o-wrapper {
  position: relative;
  transition: left 0.3s;
}

#header-wrapper {
  transition: left 0.3s;
}

.has-push-left #header-wrapper {
  left: 300px;
}

DEMO

【讨论】：

感谢您的回复。在你的小提琴中，它仍在发生。向下滚动一点，单击汉堡，导航跳到页面顶部。向下滚动一根头发（如 10 像素）以查看它的实际效果。
@JustinTurner 请查看更新的答案，我相信原因是 translateX 和带有 position: fixed 的元素一起“玩” - the demo in the updated section 显示如何使用 left 属性而不是必须搞砸padding和margin
再次感谢，让我暂时消化一下，但我认为你成功了。