html CSS定位的绝对元素，是否自动超出父级边界的宽度？

8aqjt8rx 于 2022-12-09 发布在其他

关注(0)|答案(5)|浏览(335)

因此，我将父元素相对定位，以便允许工具提示元素绝对定位在其内部，位于其顶部。0，right：0”，这样元素的宽度仍然可以设置为自动，我已经做到了。但是，我的父元素有一个固定的宽度，工具提示被限制为这个宽度，所以自动宽度不能超出它，有什么办法吗？
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;
}

要素：

<div class="parent">
  <div class="tooltip">Text goes here</div>
</div>

没有JS请，寻找一个CSS的解决方案，谢谢！

Html

来源：https://stackoverflow.com/questions/30086913/css-positioned-absolute-element-automatic-width-outside-of-parents-bounds

5条答案

按热度按时间

zzoitvuj1#

不要在.tooltip上同时设置left和right，而设置white-space: nowrap应该可以：

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
  white-space: nowrap;
}

Working example。
您需要使用**this solution来将绝对元素居中。不过，它确实需要一个额外的元素。Demo**

赞(0）回复(0）举报 2022-12-09

n6lpvg4x2#

我认为此问题的最佳解决方案是不设置left、right或white-space: nowrap，但我们为宽度属性max-content提供了新值...因此只需添加width: max-content;（此值也适用于max-width）
演示：http://jsfiddle.net/qLgw8bxu/
技术支持：https://caniuse.com/#search=max-content

.tooltip {
 background-color: blue;
 position: absolute;
 text-align: center;
 padding: 5px 10px;

 width: max-content;
}

赞(0）回复(0）举报 2022-12-09

qyyhg6bp3#

如果.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;
}

赞(0）回复(0）举报 2022-12-09

bgibtngc4#

我以前没有遇到过这个问题，但是我认为这是怎么回事，width: auto;自动继承了其父节点的属性，所以你要么在（width: 50px;）中输入一个数字，要么在（width: 50%）中输入一个百分比。

赞(0）回复(0）举报 2022-12-09

6jygbczu5#

使用宽度自动与white-space: nowrap;和位置绝对

.class {
  white-space: nowrap;
  width: auto;
  position: absolute;
}

赞(0）回复(0）举报 2022-12-09

我来回答

html CSS定位的绝对元素，是否自动超出父级边界的宽度？

5条答案

相关问题

热门标签

最新问答