继承宽度无法使用百分比值。

Question

我有两个

元素。父级

元素具有相对定位，子级

元素具有固定定位。

如果我在父级

元素上使用固定的宽度，则“width: inherit;”可以完美地工作。

当我在父级

元素上使用“width: 100%;”时，子级

元素的宽度比其父级

元素更大。

*,
*::before,
*::after {
  box-sizing: border-box;
}
.content {
  position: relative;
  background: black;
  width: 100%;
}
.fixedElement {
  position: fixed;
  width: inherit;
  background: yellow;
  z-index: 2;
  top: 0px;
}

<div class="content">
  parent
  <div class="fixedElement">
    child
  </div>
</div>

代码示例

我是否漏掉了什么？

我在考虑使用 jQuery 来设置子元素的 width，但我确信这不是一个好的解决方案，因为它只能通过 css 解决。

- IseNgaRt

Answer 1

body 具有默认的 margin。因此，父元素将填充整个宽度，但由于该 margin 而受到限制。固定元素不受 body 的限制，并且无论 margin 如何都是全宽。

然而，它会在父级中突出显示到右侧，因为它位于具有 position: relative 的父级中。如果您添加类似以下的 CSS 规则

body {
    margin: 0;
}

父元素和子元素的大小将相同。

- Hans

---

这在 Fiddle 上确实有效，但在实际网站上 margin:0 已经在 body 中设置了。-.- - IseNgaRt

这只是原则。当一个元素具有“fixed”定位时，它不受其父元素相同限制的约束。您使用“fixed”而不是“absolute”的原因是什么？ - Hans

这是一个菜单栏。当我向下滚动200像素时，它会固定在顶部位置，以便保持在页面顶部。 - IseNgaRt

你尝试过在固定元素上使用 left: 0px; right: 0px（或类似的东西）而不是 width 吗？这样你就可以让它填满整个屏幕，而不管父元素的大小。 - Hans

@Hans，你真是救星啊。不知道为什么我从来没有想过！left:0px 真的非常好用！ - IseNgaRt

Answer 2

因为您正在使用position: fixed和top: 0，子div重叠在父元素上。如果您需要您的子div具有position: fixed，并且您想要看到整个父元素，请尝试将position: fixed添加到父元素，并添加一些top值。这将显示您的父元素在子元素下面。

或者另一个解决方案是交换父元素和子元素的位置，并对它们都使用display: inline-block

- Andrew

Answer 3

如果你想让子元素继承父元素的宽度，那么它应该是绝对定位而不是固定定位。

- Rovi

---

我已经知道它使用absolute可以良好运行，但我需要它具有position:fixed。 - IseNgaRt

尝试将body的边距重置为0。 body{ margin: 0; } - Rovi