Absolute Positionierung von Außenrand

Question

Wenn ich ein Element innerhalb eines relativen Elements absolut positioniere, werden die Koordinaten von den Kanten des Containers berechnet, ohne die Ränder zu berücksichtigen (was der Positionierung von der Innenseite des Rahmens entspricht) .)

Gibt es eine Möglichkeit, das Element von der Außenseite des Rahmens aus zu positionieren?

Zum Beispiel: Wenn ich ein rotes Quadrat (wie das erste) ohne einen Rahmen habe, bleibt der Text oben links im Container, weil er top:0; left:0 hat. Aber der Text in dem zweiten Platz hat noch top:0;left:0, aber die Grenze schiebt den Text im Quadrat:

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

 
.box-bordered { 
 
    border:25px solid rgba(0,0,0,0.1); 
 
} 
 

 
.text { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
}

<div class="box"> 
 
    <div class="text">Text</div> 
 
</div> 
 

 
<div class="box box-bordered"> 
 
    <div class="text">Text</div> 
 
</div>

Was ich mag es würde für den Text ist an die Spitze zu halten kleben linke Ecke des farbigen Bereichs. Ist das möglich? Wie könnte es gemacht werden?

Hinweis: Dies ist eher eine Frage der Theorie aus Neugier; Ich weiß, es gibt Alternativen, die (zumindest optisch) wie mit negativen Margen negative Positionswerte oder einen Einsatz box-shadow arbeiten:

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

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

 
.text { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
}

<div class="box box-shadow"> 
 
    <div class="text">Text</div> 
 
</div>

aber was würde ich gerne wissen, ob es es ist möglich dabei die Grenzen halten.

Answer 1

Keine Box Schatten aber nicht ganz Grenze entweder. Wie wäre es damit?

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

 
.box:before { 
 
    content:" "; 
 
    border:25px solid rgba(0,0,0,0.1); 
 
    height:100%; 
 
    z-index:1; 
 
    position:absolute; 
 
    box-sizing:border-box; 
 
    width:100%; 
 
} 
 

 
.text { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
    z-index:2; 
 
}

<div class="box"> 
 
    <div class="text">Text</div> 
 
</div>

oder kasten begrenzt: nach, wenn Sie die Klasse auf dem div-Element

Answer 2

Ich weiß nicht, ob Sie es in Betracht gezogen haben, aber box-shadow hat eine Standardmarge. Setzen Sie es auf 0 und Sie erhalten das gewünschte Ergebnis.

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

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

 
.text { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
}

<div class="box box-shadow"> 
 
    <div class="text">Text</div> 
 
</div>

Answer 3

Die nur zwei Lösungen, die mir in den Sinn kommen, sind:

1. eine negative Marge gleich der Rahmenbreite Einstellung auf .text
2. mit negativen Werten auf der Oberseite und verlassenes Eigentum.

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

 
.box-bordered { 
 
    border:25px solid rgba(0,0,0,0.1); 
 
} 
 

 
.text { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
    margin: -25px; 
 
} 
 
.text2 { 
 
    position:absolute; 
 
    top: -25px; 
 
    left:-25px; 
 
    color:white; 
 
}

<div class="box box-bordered"> 
 
    <div class="text">Text</div> 
 
</div> 
 

 
<div class="box box-bordered"> 
 
    <div class="text2">Text</div> 
 
</div>

Answer 4

Wie Sie in der Mitte 100 x 100 Bereich ist die Region sehen können, wo Textinhalte gestellt werden. Jeder Inhalt wird basierend auf Rand, Rahmen und Füllung berechnet.

daher nicht, daß ich eine Lösung finden, ohne die negativen Margen oder Insetbox mit, wie Sie erwähnt, die eine Art von fix auf die ursprüngliche Frage ist.