【问题标题】：How to make absolutely positioned element take full screen width when it is inside fixed width container?如何使绝对定位的元素在固定宽度容器内时占据全屏宽度？
【发布时间】：2017-03-31 00:02:41
【问题描述】：

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

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

【问题讨论】：

您必须删除#id1 上的position: relative，因为该属性的作用与您尝试的完全相反。见force “position: absolute” to be relative to document not parent container。

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

很高兴知道这一点，但它不是从一开始就开始或结束，所以我猜-100% 一定是随机的？这意味着什么？
@divy3993 表示父级宽度的 100%。这个解决方案只是给#id2 900px 的宽度...
是的，但这与屏幕或身体的width 或区域有什么关系吗？那么这有什么帮助呢？只是问问。
@divy3993 不，它没有，也没有帮助。我想这就是为什么有人投反对票的原因。