有没有办法让“位置：绝对” div 保持相对宽度？答案

【问题标题】：Is there any way for "position:absolute" div to retain relative width?有没有办法让“位置：绝对” div 保持相对宽度？
【发布时间】：2012-12-28 22:10:38
【问题描述】：

假设我有两个 div，一个在另一个里面，就像这样：

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="width:100%">
      </div>
    </div>
  </body>
</html>

目前，内部 div 的宽度为屏幕大小的 50% 的 100%，或屏幕大小的 50%。如果我要将内部 div 更改为绝对位置，如下所示：

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="position:absolute;width:100%">
      </div>
    </div>
  </body>
</html>

在这种情况下，内部 div 占据了 100% 的屏幕空间，因为它的位置设置为绝对。

我的问题是：有没有办法在内部 div 的位置设置为绝对时保持其相对宽度？

【问题讨论】：

标签： html css position absolute

【解决方案1】：

我在项目中有一个必须为 position:absolute 的元素，我发现将 width 设置为 max-content 为我解决了这个问题。
它似乎在现代浏览器中得到了很好的支持。查看此链接了解更多信息：Mozilla.org (max-content)。

【讨论】：

您刚刚为我节省了大约 4 小时的调试时间，谢谢！

【解决方案2】：

将 position:relative 添加到您的外部 div。

更新：它之所以有效，是因为position: absolute 中的位置是相对于具有某些定位（静态除外）的第一个父级的。在这种情况下，没有这样的容器，所以它使用页面。

【讨论】：

感谢您的帮助！这让我烦恼了大约一个小时。我很高兴解决方案如此简单:)
噢噢噢噢！！！我花了最后 5 个小时试图修复我一直在努力的这个该死的网站。非常感谢你做的这些。你能解释一下为什么会这样吗？
如果您的外部 div 是 <svg> 并且您想在其上分层文本，则需要像这样放置另一个外部 <div> 并使用 z-indexing 代替绝对： <div style="{position: relative}"> <svg style="{position: absolute; z-index: 0}" /> <div style="{position: absolute; z-index: 100}">This is my Svg label!</div> </div>我遇到了这个问题，这个解决方案对我有用！可悲的是，<svg> 真的不能有孩子。

【解决方案3】：

是的。将外部设置为位置：相对。

http://jsfiddle.net/57673/

.outer
{
  width: 50%;
  height: 200px;
  position: relative;
  border: 1px solid red;
}

.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  border: 1px solid blue;
}

【讨论】：