Stapel div über ein anderes div

Question

Ich versuche, so etwas wie das Bild zu erreichen ich angebracht habe

Und das ist, was ich versuche in CSS zu tun, sondern bekommen konnte es nicht zu Arbeit.

#div_1 { 
 
    width: 90%; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
} 
 

 
#div_2 { 
 
    height: 110%; 
 
    width: 30%; 
 
    margin-top: -5%; 
 
    margin-left: 60%; 
 
    vertical-align: top; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
}

<div id="div_wrapper"> 
 
    <div id="div_1"> 
 
    <div id="div_2"></div> 
 
    </div> 
 
</div>

Answer 1

Gerade Position relativ zum übergeordneten und Position absolut zum Kind geben. Ich habe auch die Ränder, die Sie auf dem Kind hatten, nach oben und links ersetzt.

#div_1 { 
 
    position: relative; /* added */ 
 
    width: 90%; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0,0,0,.1); 
 
} 
 

 
#div_2 { 
 
    position: absolute; /* added */ 
 
    height: 110%; 
 
    width: 30%; 
 
    top: -5%; /* changed */ 
 
    left: 60%; /* changed */ 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0,0,0,.1); 
 
}

<div id="div_wrapper"> 
 
    <div id="div_1"> 
 
    Div 1 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div id="div_2"> 
 
     Div 2 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Was Sie tun müssen, ist Ihre Wrapper div Position als relativ zu setzen und setzen Sie ihn Anzeigeeigenschaft ist zu blockieren.

Jetzt können Sie die gewünschte Breite und Höhe für den Wrapper festlegen.

Der Wrapper ist mit einer roten gestrichelten Linie markiert.

Jetzt haben Sie die Höhe einzustellen für die untergeordneten Elemente in ihre Wrapper div zu erweitern. Sie können das tun, indem Sie ein

height: 100% 

Bereitstellung

Neben DIV1 ist untergeordnete Elemente an ihr Mutterelement auszurichten.

Um ein untergeordnetes Element an das übergeordnete Element auszurichten, können Sie die Position des übergeordneten Elements als relativ und des untergeordneten Elements als absolut festlegen.

können Sie einstellen, position: absolute div2 und position:relative div1 würde ich vorschlagen, den Standort von div2 eher mit oben zu setzen und links als margin-top und margin-left.

Hier ist eine sehr schöne Erklärung über Positionen und die häufigsten Fehler:

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

und hier https://css-tricks.com/absolute-positioning-inside-relative-positioning/ Sie einige Tipps, wie Elemente Eltern und Kind positionieren finden.

ich Ihren Code ein wenig geändert haben, haben Sie einen Blick auf sie hier:

#div_wrapper { 
 
    display: block; 
 
    position: relative; 
 
    height: 200px; /* Change to whatever height you like */ 
 
    width: 400px; /* Change to whatever width you like */ 
 
    top: 50px; /* Just for demo */ 
 
    left: 10px; /* Just for demo */ 
 
    } 
 
    
 
    #div_1 { 
 
    display: block; 
 
    position: relative; /* Added */ 
 
    width: 90%; 
 
    height: 100%; /* Added */ 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
    } 
 
    
 
    #div_2 { 
 
    position: absolute; /* Added */ 
 
    height: 110%; 
 
    width: 30%; 
 
    top: -5%; /* Modified */ 
 
    left: 60%; /* Modified */ 
 
    vertical-align: top; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
    }

<div id="div_wrapper"> 
 
    <div id="div_1"> 
 
    <div id="div_2"></div> 
 
    </div> 
 
</div>

Answer 3

folgenden Code Versuchen Sie es Arbeit sein kann für Sie sein. Sie werden einen Effekt sehen, wenn "# div_1" Inhalt oder Höhe hat.

#div_1 { 
    width: 90%; 
    position: relative; 
    background: #FBFBFB; 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
} 

#div_2 { 
    width: 30%; 
    position: absolute; 
    top: -5%; 
    bottom: -5%; 
    left: 60%; 
    vertical-align: top; 
    background: #FBFBFB; 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
} 

Answer 4

<style type="text/css"> 
    #div_wrapper{ 
     position: relative; 
     width: 100%; 
    } 
    #div_1 { 
     width: 90%; 
     background: #FBFBFB; 
     box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
     height: 300px; 
     margin-top: 100px; 
     position: relative; 
    } 

    #div_2 { 
      position: absolute; 
      height: 120%; 
      width: 30%; 
      right: 5%; 
      top:-10%; 
      background: #FBFBFB; 
      box-shadow: 1px 1px 30px rgba(0, 0, 0, .1);   
     } 
</style> 
<div id="div_wrapper"> 
    <div id="div_1"> div 1 
     <div id="div_2">div 2</div> 
    </div> 
</div> 

Answer 5

Sie können so etwas wie unten Schnipsel versuchen. Sie müssen div's Höhe nicht erwähnen, da es berechnet wird, wenn Sie top und bottom setzen.

.parent { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 80vh; 
 
    margin: 5% auto; 
 
    background: #fff; 
 
    box-shadow: 0px 0px 5px #000; 
 
} 
 
.child{ 
 
    position: absolute; 
 
    top:-5%; 
 
    bottom:-5%; 
 
    right: 10%; 
 
    width: 30%; 
 
    background: #fff; 
 
    box-shadow: 0px 0px 5px #000; 
 
}

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

Answer 6

Für dieses Layout, es wäre gut, wenn Sie position:absolute für div_2 ID und position:relative für div_1 ID verwenden, dies können Sie das Kind div Position an die Mutter überall relativ und es ist abhängig von der Höhe von .

#div_1 { 
 
    width: 90%; 
 
    background: #FBFBFB; 
 
    display:inline-block; 
 
    position:relative; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
} 
 

 
#div_2 { 
 
    width: 30%; 
 
    position:absolute; 
 
    right:10%; 
 
    top:-10px; 
 
    bottom:-10px; 
 
    vertical-align: top; 
 
    background: #FBFBFB; 
 
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .1); 
 
} 
 
#div_wrapper{ 
 
    text-align:center; 
 
    margin:50px 0px; 
 
    }

<div id="div_wrapper"> 
 
    <div id="div_1">test 
 
    <div id="div_2">test2</div> 
 
    </div> 
 
</div>