html - 当绝对定位元素在固定宽度容器内时，如何使它占据全屏宽度？

Question

HTML:

<div id='id1'>
  <div id='id2'>
  
  </div>
</div>

CSS:

#id1 {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: red;
  position: relative;
}
#id2 {
  position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
  width: 100%; top: 20px; background: green; height: 30px;
}

我希望#id2 占据全屏宽度。我可以指定左:-Npx 和右:-Npx，但这仅适用于某些屏幕尺寸。

id2不能超出screen，所以不能指定left:-9999px;

相关 fiddle :https://jsfiddle.net/aLubmd4a/

Answer 1

这是一个部分解决方案，我将 #id2 元素的 position 从 position:absolute; 更改为 位置:固定；

更新了您的 fiddle 示例:https://jsfiddle.net/aLubmd4a/2/

如果我理解正确的话，你想要实现的目标是不可能的。元素的大小和位置必须与某些上下文相关。

在您的示例中，您希望它采用 body 的宽度，但相对于您的 #id1 元素定位(垂直)，对吗？如果是这样，您应该选择一边，或者从 #id1 中取出内部 div (#id2)，或者确保更新内部 #id2 相应地。