html - flotante - ¿Elemento absoluto posicionado en CSS, ancho automático fuera de los límites de los padres?

posicionar div html

Question

Por lo tanto, tengo mi elemento principal en una posición relativa, para permitir que un elemento de información sobre herramientas se coloque absoluto dentro, en la parte superior. Soy consciente de que se requiere que agregue "left: 0, right: 0", de modo que el ancho del elemento aún pueda establecerse en auto, lo que he hecho. Sin embargo, mi elemento principal tiene un ancho fijo, al cual se restringe la información sobre herramientas, por lo que el ancho automático no puede salir de él, ¿hay alguna forma de evitar esto?

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

Elementos:

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

No JS por favor, en busca de una solución CSS, gracias!

Answer 1

No configurando a la left ni a la right en .tooltip , y configurando white-space: nowrap debería hacerlo:

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

Ejemplo de trabajo .

Necesitarías usar esta solución para centrar un elemento absoluto. Sin embargo, sí requiere un elemento adicional. Demo

Answer 2

No he visto este problema antes, pero lo que creo que está pasando es el width: auto; Hereda automáticamente las propiedades de su padre. Entonces, o bien debe ingresar un número ( width: 50px; ) o un porcentaje ( width: 50% ).

Answer 3

Si .parent se puede hacer en línea, podría hacer que .tooltip renderice como una tabla y se ajustará automáticamente a su contenido, pero a diferencia del uso de white-space:nowrap , también admitiría 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;
}