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?).
padding
también. Entre las soluciones que propones me extraña que no contemples poner en negativo los valores detop
yleft
con el mismo valor que el borde. Otra opción para mantener los valores a 0 sería tener undiv
envolviendo a.caja
que sea el que tenga la posición relativa aunque supongo que esto tampoco es lo que buscasdisplay:table
el borde no se tiene en cuenta, pero parece que en chrome no funcionadisplay: inline-block
en tu contenedor absoluto.display:inline-block
al contenedor con borde pero no me funciona (JSFiddle)display:table
. Funciona en IE y Firefox, pero no en Chrome o Safari. Debe ser algo de WebKit.