Wie positioniert man ein Div über einem anderen Div?

Question

Mein Code ist:

HTML:

<section> 
    <div id="banner"> 
     <div class="container"> 
      <p class="para">hello world</p> 
     </div> 
     <div class="container banner-bottom"> 
      <div class="card card-primary text-center z-depth-2 contact-main-text"> 
       <div class="card-block"> 
        <p class="white-text">Please fill out the form below and ESC 
staff will be in contact with you shortly.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS:

.para{ 
    color:white; 
    background: red; 
    padding:70px; 
    text-align:center;} 

    .white-text{ 
     background:green; 
     padding:20px;} 

Ausgang ist: Bootply
Und ich will:

Könnte mir jemand dabei helfen?

Answer 1

Ein bisschen Position könnte Ihnen helfen, hier ist eine grobe Version, die Sie hoffentlich, was Sie tun müssen, bekommen zu denken: http://www.bootply.com/Imuh4wUj50 Sie

Answer 2

Sie können negativ oberen Rand legen Sie die zweite div finden Sie im Live-Beispiel zu überlagern:

<div class="container banner-bottom" style="margin-top:-5%;padding:2%"> 

http://www.bootply.com/MorC45NB4V

PS: Ich habe Inline CSS verwendet nur Inline-CSS zu zeigen, zu vermeiden.

Answer 3

1) Bei:

#banner { position:relative;} 
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; } 

Heres ein bootply gegabelt möchte, dass Ihr unteres Banner eine volle Breite hat:

Sie könnten hinzufügen Position: relativ; auf das untere Banner und positionieren Sie es, indem Sie einen unteren Wert hinzufügen und den Rand verwenden, um den gleichen visuellen Effekt zu erzeugen, der in der Frage angegeben wurde.

.banner-bottom { 
    position: relative; 
    bottom: 45px; 
    margin: 0 40px; 
} 

2) Falls Sie nicht brauchen, ein Banner mit voller Breite haben und es nur zu zentrieren, dann Margen keine Notwendigkeit zu verwenden. Denken Sie daran, einen Elternteil als Position: relativ;:

#banner { position:relative;} 

.banner-bottom { 
    position: absolute; 
    top:75%; 
    right:0; 
    bottom:auto; 
    left:0; 
} 

CODEPEN

http://codepen.io/alexincarnati/pen/PWOPjY

Answer 4

Meine Lösung verwendet jQuery und einige Berechnungen. Meine Berechnung funktioniert, selbst wenn Sie die Elemente um das Dokument verschieben. Ich habe CSS auch für die von Ihnen gewünschten Ränder verwendet.

jQuery

//location of bottom of the red container 
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height(); 
//gets the bottom 4th of the red container 
var placement = bottomOfContainer - ($('#onTopOfMe').height()/4); 
//setter of top for green container 
$('#placeMe').offset({"top": placement}); 

CSS

p.white-text{ 
    margin-left:5%; 
    margin-right:5%; 
} 

Ausgabe

bootply

Answer 5

Hier ist meine solution dafür.

Im Grunde nehmen Sie einfach die Position des Kartenblocks "relativ", positionieren Sie die "obere" Position entsprechend, dann stellen Sie den Rand auf "auto", um ihn zu zentrieren.