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

时间:2015-12-22 08:07:12

标签: css css3

我有2 div秒。父级div位置relative,子级div位置fixed

如果我在父width上使用一定数量的div,则width: inherit;效果很好。 当我在父width: 100%;上使用div时,子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>
&#13;
jQuery
&#13;
&#13;
&#13;

Fiddle

我在这里错过了什么吗?

我正在考虑使用width设置孩子的css,但我确定它不是一个好的解决方案,因为它只能用Element

3 个答案:

答案 0 :(得分:4)

body有默认margin。因此,父元素将填充整个宽度,但由于该边距将受到限制。固定元素未绑定到body,并且无论边距如何都是全宽。

但是,它突出显示在父级的右侧,因为它位于具有position: relative的父级中。如果添加CSS规则,如

body {
    margin: 0;
}

父母与子女的人数相同。

答案 1 :(得分:0)

因为您使用的是position: fixedtop: 0,所以子div与您的父级重叠。如果您的孩子div需要position: fixed,并希望查看整个父元素,请尝试将position: fixed添加到您的父级并添加一些top值。这将在子元素下显示您的父元素。

或者另一种解决方案可能是更改父元素和子元素的位置,并对它们使用display: inline-block

答案 2 :(得分:0)

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