Работает нормально, но вы должны заметить, что position:fixed имеет ширину относительно области просмотра.Поэтому, если вы установите 20% в родительский элемент, фиксированный элемент унаследует 20% и не будет наследовать вычисленное значение пикселя ширины родительского элемента.
Таким образом, оба элемента будут иметь 20%, но не обаиз них имеют одинаковую ссылку для процента (т. е. не оба имеют одинаковый содержащий блок)
Ключевое слово наследования CSS заставляет элемент, для которого определено, принять вычисленное значение свойстваот его родительского элемента. ref
... Однако для некоторых свойств (таких, где проценты относятся к чему-то, что может потребоваться для определения макета, например,width, margin-right, text-indent и top), указанные в процентах значения превращаются в вычисленные в процентах значения . ref
Вот базовый пример для иллюстрации:
.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
left:0;
}
body {
padding:0 100px;
}
<div class="box">
<div></div>
</div>
В приведенном ниже примере оба элемента имеют width:100%.Фиксированный элемент имеет 100% ширину области просмотра, в то время как статический элемент имеет 100% ширины body минус отступ.
Положение и размер блока (ов) элементаиногда вычисляется относительно определенного прямоугольника, называемого содержащим блок элементом.Содержащий блок элемента определяется следующим образом:
...
Для других элементов, если позиция элемента 'относительная' или 'статическая', содержащий блок формируется краем содержимого блока предка ближайшего контейнера блока.
Если элемент имеет 'position: fixed', содержащий блок устанавливается в окне просмотра в случае непрерывного носителя или области страницы в случае постраничного носителя. ref
Еще одна вещь, на которую следует обратить внимание, это то, что вы не устанавливаете любое значение left в своем коде, котороесбивает с толку и заставит вас думать, что ширина фиксированного элемента неверна, но у вас просто переполнение.
Вот предыдущий код без левых:
.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
}
body {
padding-left:100px;
}
<div class="box">
<div></div>
</div>
Можно подумать, что фиксированный элемент имеет такую же ширину, что и статический, но нет.Фиксированный элемент переполнен.
Связанный: Почему мои абсолютно позиционированные элементы не находятся там, где я ожидаю?