有没有办法让“位置：绝对” div 保持相对宽度？
Posted
技术标签:
【中文标题】有没有办法让“位置：绝对” div 保持相对宽度？【英文标题】：Is there any way for "position:absolute" div to retain relative width? 【发布时间】：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 的位置设置为绝对时保持其相对宽度？
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于有没有办法让“位置：绝对” div 保持相对宽度？的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？