2016-03-25 9 views
0

Ich bin verwirrt darüber, wie man diese Divs so stapeln kann, wie ich es möchte. Ich kann den Hauptinhalt div (.innerdiv2) nicht erreichen, um unter dem ersten Headerdiv (.innerdiv1) zu stapeln, der/die absolute Positionierung hat (damit das eine Bild über dem anderen ist).Wie bekomme ich äußere Divs richtig gestapelt, wenn absolute Position innerhalb der ersten positioniert ist?

Ich muss auch keine feste Höhe auf dem Bild verwenden. Dies ist der Vorschlag, den ich am häufigsten gefunden habe, wenn ich nach verwandten Beiträgen und Lösungen suche. Aber ich möchte nicht, dass (feste Höhe) dort einrastet, wo das zweite Div auf der Seite beginnt. Wenn der Bildschirm verkleinert wird, möchte ich, dass die beiden Header-Bilder proportional verkleinert werden, was bedeutet, dass sie in der Höhe abnehmen und das zweite Div höher beginnen sollte, weshalb ich keine feste Höhe verwenden möchte. Ist das möglich? Hier

ist der Code, mit denen ich arbeite:

.maindiv { 
 
    position: relative; 
 
    } 
 

 
    .innerdiv1 { 
 
    max-width: 975px; 
 
    width: 100%; 
 
    } 
 

 
    .imgbg { 
 
    position: absolute; 
 
    z-index: 102; 
 
    max-width: 975px; 
 
    width: 100%; 
 
    } 
 

 
    .imglogo { 
 
    position: absolute; 
 
    z-index: 103; 
 
    margin-left: 40px; 
 
    margin-top: 20px; 
 
    width: 33%; 
 
    } 
 

 
    .innerdiv2 { 
 
    position: relative; 
 
    width: 100%; 
 
    } 
 

 
    .tbl1 { 
 
    width: 100%; 
 
    max-width: 975px; 
 
    " border="0" cellpadding="0" cellspacing="0; 
 
    } 
 

 
    .imgfooter { 
 
    width: 100%; 
 
    max-width: 975px; 
 
    position: relative; 
 
    cursor: pointer; 
 
    }
<div class="maindiv"> 
 
     <div class="innerdiv1"> 
 
     <img class="imgbg" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif"> 
 
     <img class="imglogo" src="data:image/jpeg;base64,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"> 
 
     </div> 
 
     <div class="innerdiv2"> 
 
     <table class="tbl1"> 
 
      <tr> 
 
      <td> 
 
       <p> 
 
       1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices justo justo, ac consequat arcu pellentesque id. Nulla hendrerit dui vitae neque venenatis consequat. Morbi justo eros, dictum et enim et, pellentesque fermentum augue. Aliquam 
 
       non sapien eros. Sed auctor enim ac blandit rhoncus. Vivamus condimentum ex nulla, quis laoreet risus sodales quis. Vivamus interdum aliquam ultricies. Donec consectetur turpis et vehicula hendrerit. Fusce ac dui nec odio convallis malesuada 
 
       id ultricies lectus. 
 
       </p> 
 
       <p> 
 
       2. Nam mi enim, bibendum id porttitor quis, posuere ac arcu. Donec pulvinar enim nec gravida accumsan. Fusce enim risus, laoreet nec venenatis aliquam, feugiat a sapien. Aenean vulputate fermentum ex, at cursus diam cursus vel. Vivamus maximus velit mi, 
 
       ut auctor libero hendrerit ut. Donec vel pharetra nulla. Aenean imperdiet elementum felis vel finibus. Aenean eu luctus velit, nec accumsan velit. 
 
       </p> 
 
       <p> 
 
       3. Nullam pharetra orci nec lacinia bibendum. Ut tortor dolor, feugiat sed nulla ac, ultricies vehicula mi. Donec in arcu tincidunt, convallis lectus eu, ornare eros. Duis mollis ultrices lacus vulputate iaculis. Quisque urna lorem, consectetur in sollicitudin 
 
       ut, volutpat et ex. Integer finibus malesuada ipsum, eget consequat nulla interdum et. Maecenas ullamcorper ante turpis, vitae mattis libero ultricies a. Duis bibendum sapien vitae molestie interdum. 
 
       </p> 
 
       <p> 
 
       4. Vestibulum cursus ipsum augue, eget consequat dui ullamcorper sed. Phasellus a ligula eu tellus posuere tristique quis eu odio. Nullam id est in orci pharetra tempus sed dictum sem. Phasellus vehicula iaculis augue ac scelerisque. Sed pretium eros 
 
       sed tortor condimentum viverra. Quisque euismod sed ante eu facilisis. Quisque rhoncus auctor arcu at aliquet. Pellentesque eleifend leo at nisl fringilla sagittis. Sed augue erat, faucibus a nulla at, porttitor volutpat dui. 
 
       </p> 
 
       <p> 
 
       5. Maecenas semper erat euismod, ultricies augue et, aliquam ipsum. Sed commodo diam a posuere tristique. Vestibulum placerat risus orci, vitae finibus libero vulputate sed. Vestibulum ac nulla maximus, lobortis turpis interdum, tempor lectus. Fusce pretium 
 
       scelerisque viverra. Vestibulum aliquam at ex eget sollicitudin. Proin in vehicula velit. Nam eget metus sed dui lobortis pulvinar sit amet sed tortor. Aliquam eu nunc a tortor ultricies euismod. 
 
       </p> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <img class="imgfooter" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif"> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div>

https://jsfiddle.net/b2tngLym/8/

+0

Der Grund für Ihr Problem ist, das Sie verwenden absolut Positionierung welche entfernt dieses Element aus dem normalen Fluss. Deshalb können sich die anderen Elemente in diesen Raum bewegen. Die Standardmethode, dies zu verhindern, ist, das übergeordnete Element relativ zu positionieren und "overflow: auto" auszuführen. Es wird also erweitert, um das absolut positionierte Kindelement zu enthalten und die anderen an ihrem Platz zu halten. – Rob

Antwort

1

EDIT: See this fiddle

 .imgbg { width: 100%; } 
     .innerdiv1 { 
     max-width: 975px; 
     width: 100%; 
     position: relative; 
     } 


     .imglogo { 
     position: absolute; 
     z-index: 103; 
     margin-left: 40px; 
     margin-top: 20px; 
     width: 33%; 
     left: 0; 
     top: 0 
     } 
+0

Ich möchte das nicht tun, weil, wie ich in der Post sagte, wenn die Seite erheblich verkleinert wird, eine Lücke entsteht/das Content-Div beginnt zu niedrig. Schrumpfen Sie die Seite, die Bilder verkleinern sich und der Inhalt wird auf der Seite weit unterhalb der Header-Bilder abgelegt (auf einem kleineren Bildschirm ist dies signifikant). http://screencast.com/t/aKohSKkr https://jsfiddle.net/b2tngLym/6/ – sds

+0

Richtig, ich habe es bearbeitet! :) –

+0

Das ist großartig! Kannst du den Unterschied erklären? – sds

Verwandte Themen