在固定宽度的容器内，如何使绝对定位的元素占据全屏宽度？

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不能超出屏幕，所以我不能指定左：-9999px;

相关小提琴：https://jsfiddle.net/aLubmd4a/

Answer 1

这是部分解决方案，我已将position元素的#id2从position:absolute;更改为position:fixed;

更新了您的小提琴示例：https://jsfiddle.net/aLubmd4a/2/

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

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

Answer 2

#id2 {
    position: absolute;
    left: -100%;
    right: -100%;
    top: 20px;
    background: green;
    height: 30px;
}

https://jsfiddle.net/aLubmd4a/1/