位置固定 100 of parent

Question

我遇到了困难：我有一个 parent 元素，其大小未知。我有一个项目，它必须永久放置在 body 的顶部，然后是 position: fixed，但我不能，因为给它 width: 100%，是 [=18] 的 100% =]，但我想要 parent 元素的 100%。我该怎么办？

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

Answer 1

问题在于，与绝对定位元素不同，固定定位元素的包含块通常是视口，而不是其最近的定位元素。然后，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>

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

Answer 2

设置.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>

Answer 3

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

位置固定 100 of parent

Position fixed 100 of parent

css

fixed