Html CSS 定位绝对元素，超出父级边界的自动宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30086913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Positioned Absolute Element, automatic width outside of parent's bounds?
提问by Danny
So, I have my parent element positioned relative, in order to allow a tooltip element to be positioned absolute inside, at the top of it. I am aware that you are required to add "left: 0, right: 0", so that the width of the element is still able to be set to auto, which I have done. However, my parent element has a fixed width, which the tooltip becomes restrained to, so the auto width cannot go outside of it, is there any way around this?
因此，我将我的父元素相对定位，以便将工具提示元素绝对定位在其顶部。我知道您需要添加“左：0，右：0”，以便元素的宽度仍然能够设置为自动，我已经完成了。但是，我的父元素有一个固定的宽度，工具提示被限制在这个宽度上，所以自动宽度不能超出它，有什么办法可以解决这个问题吗？
CSS:
CSS：
.parent {
position: relative;
width: 100px;
height: 100px;
}
.tooltip {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
width: auto;
padding: 5px 10px;
}
Elements:
元素：
<div class="parent">
<div class="tooltip">Text goes here</div>
</div>
No JS please, looking for a CSS solution, thanks!
请不要使用 JS，正在寻找 CSS 解决方案，谢谢！
回答by Honore Doktorr
Not setting both leftand righton .tooltip, and setting white-space: nowrapshould do it:
不设置left和righton .tooltip，并且设置white-space: nowrap应该这样做：
.tooltip {
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
text-align: center;
width: auto;
padding: 5px 10px;
white-space: nowrap;
}
工作示例。
You'd need to use this solutionto center an absolute element. It does require an additional element, though. Demo
回答by Joe Koker
I believe the best solution for this issue is not settingleft, rightor white-space: nowrapbut we have a new valuefor width property max-content... so just add the width: max-content;(this one works with max-widthas well)
我相信这个问题的最佳解决方案不是设置left，right或者white-space: nowrap我们有一个新的宽度属性值max-content......所以只需添加width: max-content;（这个max-width也适用）
demo: http://jsfiddle.net/qLgw8bxu/
演示：http: //jsfiddle.net/qLgw8bxu/
support: https://caniuse.com/#search=max-content
支持：https: //caniuse.com/#search=max-content
.tooltip {
background-color: blue;
position: absolute;
text-align: center;
padding: 5px 10px;
width: max-content;
}
回答by Steven Vachon
If .parentcan be made inline, you could make .tooltiprender as a table and it will autosize to fit its contents, but unlike with the use of white-space:nowrap, it would also support a max-width.
如果.parent可以内联，则可以将.tooltip呈现为表格，它会自动调整大小以适应其内容，但与使用不同的是white-space:nowrap，它还支持max-width.
.parent {
display: inline;
position: relative;
}
.tooltip {
position: absolute;
display: table;
top: 0;
left: 0;
text-align: center;
padding: 5px 10px;
max-width: 200px;
}
回答by Jasper van Amerongen
I haven't seen this problem before, but what I think is going on, is that width: auto;automatically inherits the properties of its parent. So either you have to put a number in (width: 50px;) or a percentage (width: 50%).
我以前从未见过这个问题，但我认为正在发生的是width: auto;自动继承其父级的属性。因此，您必须在 ( width: 50px;) 或百分比 ( width: 50%) 中输入数字。
