web-dev-qa-db-fra.com

Élément absolu positionné CSS, largeur automatique en dehors des limites du parent?

Donc, j'ai mon élément parent positionné relativement, afin de permettre à un élément d'info-bulle d'être positionné de façon absolue à l'intérieur, en haut de celui-ci. Je sais que vous devez ajouter "left: 0, right: 0", afin que la largeur de l'élément puisse toujours être définie sur auto, ce que j'ai fait. Cependant, mon élément parent a une largeur fixe, à laquelle l'infobulle devient restreinte, de sorte que la largeur automatique ne peut pas aller en dehors, y a-t-il un moyen de contourner cela?

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

Éléments:

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

Pas de JS s'il vous plaît, à la recherche d'une solution CSS, merci!

htmlcsscss3position
25
Danny

Ne pas définir à la fois left et right sur .tooltip et définissant white-space: nowrap devrait le faire:

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

Exemple de travail .

Vous devez utiliser cette solution pour centrer un élément absolu. Il nécessite cependant un élément supplémentaire. Démo

60
Honore Doktorr

Si .parent peut être fait en ligne, vous pouvez faire .tooltip sera rendu sous forme de tableau et sa taille sera automatiquement adaptée à son contenu, mais contrairement à l'utilisation de white-space:nowrap, il prendrait également en charge un 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

Je pense que la meilleure solution à ce problème ne consiste pas à définir left, right ou white-space: nowrap mais nous avons une nouvelle valeur pour la propriété width max-content... alors il suffit d'ajouter le width: max-content; (celui-ci fonctionne avec max-width ainsi que)

démo: http://jsfiddle.net/v6c8kou4/

support: https://caniuse.com/#search=max-content

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

 width: max-content;
}
1
Joe Koker

Je n'ai jamais vu ce problème auparavant, mais ce qui se passe, je pense, c'est que width: auto; hérite automatiquement des propriétés de son parent. Donc, soit vous devez mettre un nombre entre (width: 50px;) ou un pourcentage (width: 50%).

1
Jasper van Amerongen