Question

我遇到了困难：我有一个父元素，其大小不知道。而且我有一个必须永久放在身体顶部的物品，然后position: fixed，但我不能因为给它width: 100%，是100％的身体，但我想要100％父元素。我该怎么办？

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

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>

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>

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

Answer 3

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

位置固定100父母

3 个答案: