css Bild anzeigen 20 px außerhalb div

Question

Ich habe eine Frage zu css. Wie man ein div immer 20px größer als Elternelement zeigt. Wenn ich also die Größe ändere, sollte das div 100% der Breite und dann 20px mehr auf jeder Seite nehmen.

Answer 1

Haben Sie calc() versucht:

width: calc(100% + 20px) 

Plus-20px von jeder Seite:

height: calc(100% + 40px) 
margin: -20px 0 0 -20px 
width: calc(100% + 60px) 

.. oder

height: calc(100% + 40px) 
transform: translate3d(-20px,-20px,0) 
width: calc(100% + 60px) 

Answer 2

warum um die andere Art und Weise nicht tun? Der Elternteil sollte 20px größer sein.

Wenn Sie das wirklich benötigen, können Sie etwas tun:

.parent{ 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
} 
 

 
.parent .child{ 
 
    width:calc(100% + 40px); 
 
    height:calc(100% + 40px); 
 
    position:absolute; 
 
    left:-20px; 
 
    top:-20px; 
 
}

<div class="parent"> 
 
    parent 
 
    <div class="child"> 
 
     child 
 
    </div> 
 
</div>

Answer 3

Sie könnten das Kind div absolute ly an die Mutter positioniert machen (vorausgesetzt, es ist position: relative)

Sie könnten dann festlegen, dass das untergeordnete Element der Breite und Höhe des übergeordneten Elements entspricht. Dann können Sie es "dehnen", indem Sie Füll- und negative Positionierungswerte für die Kompensation hinzufügen ...

Bitte beachten Sie, das rote Quadrat ist das übergeordnete und das transluzente Overlay ist das Kind.

body { 
 
    margin-top: 50px; 
 
} 
 
.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: -20px; 
 
    bottom: -20px; 
 
    left: -20px; 
 
    right: -20px; 
 
    content: " "; 
 
    background: rgba(0,0,0,0.4); 
 
    padding: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>

Bitte beachten Sie: Ich bin sicher, dass eine viel elegantere Art und Weise, dies zu erreichen gibt es als das, was ich getan habe, aber es scheint in jedem Fall zu arbeiten!

Answer 4

Hier gehts mit einer anderen Lösung mit cal() Funktion.

Here is JSfiddle: https://jsfiddle.net/arifkarim/ohmfaj2d/