相对于具有最大宽度的父级设置固定定位 div 的宽度答案

【问题标题】：Set width of fixed positioned div relative to his parent having max-width相对于具有最大宽度的父级设置固定定位 div 的宽度
【发布时间】：2020-08-11 07:05:31
【问题描述】：

没有JS有什么办法吗？

html

<div class="wrapper">
   <div class="fix"></div>
</div>

css

.wrapper {
  max-width: 500px;
  border: 1px solid red;
  height: 5500px;
  position: relative;
}


.fix {
  width: inherit;
  height: 20px;
  position:fixed;
  background: black;
}

除了width: 100%;，我无法为.wrapper 添加任何其他样式。我尝试使用width: inherit，但它对我不起作用，因为我的父 div 只有最大宽度。 source

这里是JsFiddle Demo

【问题讨论】：

标签： html css css-position

【解决方案1】：

position:fixed 元素不再与其父元素相关。它只尊重视口的边界。

MDN Definition:

固定
不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。

因此，任何width、max-width 或任何属性都不会被固定元素尊重。

编辑

事实上，它不会继承width，因为包装器上没有定义width属性。所以，尝试将子级设置为width: 100%并继承max-width：

http://jsfiddle.net/mx6anLuu/2/

.wrapper {
    max-width: 500px;
    border: 1px solid red;
    height: 5500px;
    position: relative;
}


.fix {
    max-width: inherit;
    width: 100%;
    height: 20px;
    position:fixed;
    background: black;
}

【讨论】：

这并不意味着它不会通过inherit值继承父级的width。
@HashemQolami，这是真的......事实是它不会继承width，因为父级中没有width......我已经更新了答案。跨度>
像魅力一样工作，谢谢。我认为你应该删除这个“所以任何宽度、最大宽度或任何属性都不会被固定元素尊重”，因为它不是严格正确的：如果父级有一个宽度，那么设置宽度：继承（不是宽度：100% ) 在固定位置的孩子上可以正常工作。

【解决方案2】：

列上已经有宽度了，设置固定元素的宽度就可以继承了。没有理由让事情复杂化。

CSS：

.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }

HTML：

<div class="col-sm-3">
    <div class="fixed-in-div">
        ...
    </div>
</div>

【讨论】：

【解决方案3】：

似乎没有JS就没有解决方案。 Felipe Tadeo 的这篇博文解释了原因：

https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

它解释了围绕width: inherit 的困惑

“固定位置本身相对于视口...每当您继承宽度（位置固定）时，它将相对于视口”

【讨论】：