html - 固定 div 的右侧溢出其父级

Question

我正在尝试将一个 position:fixed div 放在另一个 div 中。我想要一个具有 width:100%; 的固定 div，因此它同时适用于移动设备和桌面设备。

这是我的 JSfiddle

SF 想要一些代码:

<div id="container">
  <div id="item">This div is good div</div>
  <div id="fixed">Right side of this div overflow its parent!!! </div>
</div>

Answer 1

具有 position: fixed; 的元素会忽略父级大小，因为它仅与视口(viewport)相关:

MDN:

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.

您可以:

1. 尝试给它 position: absolute; 并将容器设置为 position: relative;。

2. 使用 position: fixed; 并明确设置大小。