web-dev-qa-db-ja.com

CSS配置絶対要素、親の境界の外側の自動幅？

したがって、ツールチップ要素をその内部の絶対上部に配置できるように、親要素を相対位置に配置しています。 「left：0、right：0」を追加する必要があることは承知しています。そのため、要素の幅はまだautoに設定できます。ただし、私の親要素の幅は固定されており、ツールチップが制限されるため、自動幅はその幅を超えることはできませんが、これを回避する方法はありますか？

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>

CSSソリューションを探しているJSはいらない、ありがとう！

htmlcsscss3position
25
Danny

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

実施例 。

このソリューションを使用して、絶対要素を中央に配置する必要があります。ただし、追加の要素が必要です。 デモ （

60
Honore Doktorr

.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;
}
3
Steven Vachon

この問題の最善の解決策は、left、right、またはwhite-space: nowrapを設定しないことですが、widthプロパティの新しい値max-content...を追加するだけですwidth: max-content;（これはmax-widthでも機能します）

デモ： http://jsfiddle.net/v6c8kou4/

サポート： https://caniuse.com/#search=max-content

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

 width: max-content;
}
1
Joe Koker

私は前にこの問題を見たことがないが、私が起こっていると思うことは、width: auto;は、自動的に親のプロパティを継承します。そのため、（width: 50px;）または割合（width: 50%）。

1
Jasper van Amerongen