设置固定定位div相对于具有max-width的父级的宽度

Question

没有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;
}

我不能添加任何其他样式.wrapper除外width: 100%;.我尝试width: inherit但它不适合我,因为我有父div只有最大宽度.资源

这是JsFiddle演示

Answer 1

一个position:fixed元素是不是相对于其父了.它只尊重视口的boudaries.

MDN定义:

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

因此,任何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;
}