css - 继承宽度不适用于百分比值

Question

我有 2 个 div。父级 div 具有相对 位置，子级 div 具有固定 位置。

如果我在父 div 上使用固定数量的 width，width: inherit; 可以完美地工作。当我在父级 div 上使用 width: 100%; 时，子级 div 的 width 大于其父级。

*,
*::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>

Fiddle

我是不是漏掉了什么？

我正在考虑使用 jQuery 来设置 child 的 width 但我确信这不是一个好的解决方案，因为它只能用 CSS。

Answer 1

body 有一个默认的margin。因此，父元素将填满整个宽度，但由于该边距而受到限制。固定元素未绑定(bind)到 body 并且是全宽，与边距无关。

但是，它突出在父级的右侧，因为它位于具有 position: relative 的父级中。如果你添加一个 CSS 规则，比如

body {
    margin: 0;
}

parent 和 child 的大小相同。