固定定位相对于父元素的100位置

Question

我遇到了困难：我有一个父元素，它的大小是不确定的。我有一个项目，它必须永久地放置在页面顶部，因此需要使用 position: fixed 样式，但我无法使用 width: 100% 来让它占满整个父元素宽度，因为这样会占满整个页面的宽度，而我想让它占满整个父元素宽度。我该怎么办？

示例： http://codepen.io/michele96/pen/jWbYQb

- mikelplhts

Answer 1

将.fixed的宽度设置为width:inherit;，不要使用100%

body {
 padding: 0;
 margin: 0 auto;
}
.container {
 position: relative;
 width: 70%;
 height: 1000px;
 background: red;
}

.fixed {
 position: fixed;
 width: inherit; /*change here*/
 line-height: 50px;
 background: blue;
 color: #f0f0f0;
 text-align: center;
 font-size: 20px;
}

<div class="container">
 <div class="fixed">Navbar Fixed</div>
</div>

- Alien

---

在这种情况下，这是一个好主意。但需要注意的是，如果.container处于具有与100％不同的width的.super-container内部，则无法正常工作。 - Oriol

Answer 2

问题在于，与绝对定位元素不同，固定定位元素的包含块通常是视口，而不是最近的定位元素。因此，width: 100%将相对于视口宽度解析。

有方法可以改变这种行为，例如具有transform属性的元素会为其固定定位的后代元素建立包含块。但这样，您的元素将不会固定在视口顶部。

相反，您应该使用粘性定位：

.fixed {
  position: sticky;
  top: 0;
}

body {
  padding: 0;
  margin: 0 auto;
}
.container {
  width: 70%;
  height: 1000px;
  background: red;
}
.fixed {
  position: sticky;
  top: 0;
  line-height: 50px;
  background: blue;
  color: #f0f0f0;
  text-align: center;
  font-size: 20px;
}

<div class="container">
  <div class="fixed">Navbar Fixed</div>
</div>

请注意，目前尚未得到广泛支持。

- Oriol

---

@AmrNoman 不错啊？？..说得好:)..但期待着我们何时可以跨浏览器使用它 - Asons

Answer 3

将父元素设置为 transform: translate3d(0, 0, 0);。

- Arthur

---

只是友好的建议，一个完整的代码块会严重提高你的回答质量，例如：.container { -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }（显然格式良好），并解释为什么这样做能起作用将会额外加分 :) - Frits