4

Cuando posiciono un elemento de manera absoluta dentro de otro elemento (con posición relativa), las coordenadas que ponga se cuentan desde los extremos del contenedor sin tener en cuenta los bordes (lo que sería equivalente a la parte interior del borde).

¿Hay alguna manera de que en su lugar se use de referencia el exterior del borde?

Por ejemplo: Si tengo un cuadrado rojo como el primero, sin borde, el texto se ajusta a la esquina superior izquierda al tener top:0; left:0. Pero en el segundo cuadrado, a pesar de seguir teniendo top:0;left:0, los bordes empujan el contenido hacia dentro del cuadrado.

.caja {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.caja-con-borde {
  border:25px solid rgba(0,0,0,0.1);
}

.texto {
  position:absolute;
  top:0;
  left:0;
  color:white;
}
<div class="caja">
  <div class="texto">Texto</div>
</div>

<div class="caja caja-con-borde">
  <div class="texto">Texto</div>
</div>

Lo que me interesa es que el texto siga estando en la esquina superior izquierda de la zona coloreada. ¿Es eso posible?¿Cómo podría hacerse?

Nota: Esto es más una pregunta teórica y por curiosidad; sé que hay alternativas para solucionar lo que busco (al menos visualmente), como por ejemplo usando márgenes negativos o un box-shadow interno:

.caja {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.caja-con-sombra {
  box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
}

.texto {
  position:absolute;
  top:0;
  left:0;
  color:white;
}
<div class="caja caja-con-sombra" data-num="3">
  <div class="texto">Texto</div>
</div>

pero lo que quiero saber es si se puede hacer manteniendo los bordes (¿quizás con una combinación de boz-sizing o alguna otra propiedad de CSS?).

5
  • Yo diría que no es posible, no solo cuenta el borde sino el padding también. Entre las soluciones que propones me extraña que no contemples poner en negativo los valores de top y left con el mismo valor que el borde. Otra opción para mantener los valores a 0 sería tener un div envolviendo a .caja que sea el que tenga la posición relativa aunque supongo que esto tampoco es lo que buscas
    – user7176
    Commented el 21 oct. 2016 a las 7:04
  • 1
    En lo del padding me he equivocado pero he descubierto que poniendo a la caja display:table el borde no se tiene en cuenta, pero parece que en chrome no funciona
    – user7176
    Commented el 21 oct. 2016 a las 7:57
  • Usa display: inline-block en tu contenedor absoluto. Commented el 21 oct. 2016 a las 7:58
  • @AnimationsNow puse display:inline-block al contenedor con borde pero no me funciona (JSFiddle)
    – Alvaro Montoro
    Commented el 21 oct. 2016 a las 13:42
  • @blonfu interesante, lo del display:table. Funciona en IE y Firefox, pero no en Chrome o Safari. Debe ser algo de WebKit.
    – Alvaro Montoro
    Commented el 21 oct. 2016 a las 13:47

1 respuesta 1

1

Si le pones los valores "top" y "left" negativos podrás hacer lo que quieres:

.caja {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.caja-con-borde {
  border:25px solid rgba(0,0,0,0.1);
}

.texto {
  position:absolute;
  top:-25;
  left:-25;
  color:white;
}
<div class="caja">
  <div class="texto">Texto</div>
</div>

<div class="caja caja-con-borde">
  <div class="texto">Texto</div>
</div>

De todas formas, si el resultado que quieres obtener es este, habría maneras más correctas de hacerlas. Si explicas exactamente lo que quieres hacer a lo mejor podemos ayudarte más ;)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.