CSS - machen links div gehen über rechts div als ein Overlay auf kleinen Bildschirmen

Question

Ich bin in meinem Projekt mitz foundation und ich habe ein Layout mit 2 divs in einer Reihe. Man nimmt 4 Spalten auf der linken und die andere nimmt 8 Spalten auf der rechten Seite. Auf der linken Seite habe ich einige Inhalte und auf der rechten Seite habe ich ein Bild, das die ganze div aufnimmt. Ich möchte auf kleinen Bildschirmen den Inhalt der linken div über das Bild, wie eine Überlagerung, anstatt rechts div gehen unter der linken div gehen. Aber ich bin mir nicht sicher, wie und was der beste Weg ist, um das zu erreichen?

<div class="header row"> 
    <div class="large-12 columns frontpage-header-content"> 
     <div class="large-4 columns frontpage-header-content-div"> 
      <div class="snirky-snark-box"> 
       <h3>Vi arbeider med å bygge kompetanse, spre kunnskap og positiv energi</h3> 
       <div class="border"></div> 
       <div class="payment-box"> 
        <label for="support" id="payment-input"><span>Gi et beløp</span> 
         <input type="text" id="support"> 
        </label> 
        <button type="button" class="button button-full" id="payment-button">Støtt oss</button> 
        <div class="payment-methods"> 
         <p><span><img id="vipps" src="<?php echo get_template_directory_uri(); ?>/assets/images/vipps.svg"></span><span>Bankkort</span><span>Sms</span><span>Faktura</span></p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="large-8 columns frontpage-header-image-div"> 
      <div class="frontpage-bg-image-wrapper"> 
       <div class="header-bg-image frontpage-header-hero"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-bg.png"></div> 
       <div class="overlay"></div> 
      </div> 
     </div> 
    </div> 

    <?php get_template_part('title-bar'); ?> 
</div><!-- /.header --> 


<div class="promo row"> 
</div> 

Ich habe es geschafft mit folgenden CSS, die einen linken div geht über die rechte als Overlay zu erreichen, aber ich habe ein Problem mit einem promo row, da nun der Inhalt der Reihe Promo-Header geht über außerdem, wie kann ich die Promo-Zeile drücken, um unter den Header zu gehen?

@include breakpoint(medium down) { 
    .frontpage-header-image, .frontpage-bg-image-wrapper { 
    width: 100%; 
    } 

    .frontpage-header-content, .singlepage-header-content { 
    padding-top: 84px!important; 
    position: relative; 
    } 

    .frontpage-header-content-div, .frontpage-header-image-div { 
    position: absolute; 
    top: 84px; 
    padding: 0; 
    } 

    .snirky-snark-box { 
    position: absolute; 
    top: 22%; 
    width: 100%; 
    padding-left: 30px; 
    padding-right: 30px; 

    h3 { 
     width: 200px; 
     font-size: 24px; 
    } 
    } 

    .snirky-snark-box .payment-box { 
    padding: 0; 
    } 

    .payment-methods, .border { 
    display: none!important; 
    } 

    .header > .columns { 
    padding: 0; 
    } 
} 

Answer 1

Anstatt die divs zu bewegen; Wie wäre es, das Bild als Hintergrund zu duplizieren?

In der Klasse show-for-medium zu .frontpage-header-image-div, dies zeigt nur den div wenn Bildschirmgröße> Medium (docs) und so etwas in Ihrem (n) CSS hinzufügen:

.frontpage-header-content { 
    @include breakpoint(medium down) { 
     background-image: url([your image url]); 
     -webkit-background-size: contain; 
     -moz-background-size: contain; 
     -o-background-size: contain; 
     background-size: contain; 
     background-attachment: fixed; 
     background-repeat: no-repeat; 
    } 
} 

(NB Wie Sie verwenden Stiftung SASS-Version, Sie brauchen nicht alle Präfixe, sie werden für Sie hinzugefügt, wenn es baut)

Also für Medium + Bildschirme erhalten Sie die zwei divs Seite an Seite mit dem Bild auf der linken Seite, aber für kleine Sie nur Holen Sie sich das erste Div, aber jetzt hat es ein Hintergrundbild.

Hier ist a basic JSFiddle, müssten Sie es jedoch zu Ihrem Bild zwicken.

Answer 2

Versuchen Sie die rechte Spalte absolute machen und es auf der rechten Seite halten, während sie eine geringere Z-Index als die linke Spalte geben:

.snirky-snark-box{z-index:2;} 

.frontpage-bg-image-wrapper{position:absolute; right:0; z-index:1;} 

Das sollte funktionieren. Ist dies nicht der Fall, posten Sie bitte ein funktionierendes Snippet Ihres Codes (einschließlich CSS).