Absolute positioning from outside the edge

4

When I position an element absolutely within another element (with relative position), the coordinates that I put are counted from the ends of the container without taking into account the edges (which would be equivalent to the inner part of the edge).

Is there any way that the outer edge of the border is used instead?

For example: If I have a red square like the first, without a border, the text adjusts to the upper left corner by having top:0; left:0 . But in the second square, despite continuing to have top:0;left:0 , the edges push the content into the square.

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

What interests me is that the text remains in the upper left corner of the colored area. Is that possible? How could it be done?

  

Note: This is more a theoretical question and out of curiosity; I know that there are alternatives to solve what I'm looking for (at least visually), such as using negative margins or an internal box-shadow :

     

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

but what I want to know is if it can be done by keeping the edges (maybe with a combination of boz-sizing or some other CSS property?).

    
asked by Alvaro Montoro 21.10.2016 в 06:53
source

1 answer

1

If you put negative values "top" and "left" you can do what you want:

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

Anyway, if the result you want is this, there would be more correct ways to do it. If you explain exactly what you want to do, maybe we can help you more;)

    
answered by 21.10.2016 в 17:49