Machen Sie Kindergröße größer als die Eltern

Question

Nicht sicher, ob ich denke, das ist die völlig falsche Art, aber einige Anleitung würde sehr geschätzt werden. Ich versuche im Wesentlichen, ein Kind div größer als sein Elternteil zu bekommen.

Bitte siehe Bild für das, was ich

zu erreichen bin versucht, aber die Höhe auf dem Containerelement kleiner sein wird. Habe ich recht damit zu denken, dass ich sie als separate Elemente haben sollte oder gibt es einen besseren Übungsweg?

Answer 1

Sie können position verwenden und erreichen, was Sie wollen. Ich würde sagen, eine Kombination aus position, negativ margin wird der Trick:

.parent {background-color: #000; height: 100px;} 
 
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;} 
 

 
.parent {margin-top: 100px;} 
 
.parent .child {position: relative; top: -50%;}

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

Vorschau:

Wenn Sie nicht wissen, die Höhe des Inhalts können Sie translate verwenden, um es an der Zentrierung zu beheben:

.parent {background-color: #000; width: 75%; margin: auto;} 
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;} 

.parent {margin-top: 100px; position: relative; min-height: 100px;} 
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);} 

Answer 2

Einfach transform: scale(1.2); Ihr Kind Element

#parent{ 
 
    margin: 40px; 
 
    background:#000; 
 
} 
 
#child{ 
 
    background:#d8d8d8; 
 
    height:140px; 
 
    box-shadow: 0 0 40px rgba(0,0,0,0.2); 
 
    position:relative; 
 
    margin:0 auto; 
 
    width:60%; 
 
    transform:scale(1.2); -webkit-transform:scale(1.2); 
 
}

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