CSS - 左のdivを右のdivをオーバーレイとして小さな画面に表示する

Question

私のプロジェクトではzurb foundationを使用していますが、2つのdivを含むレイアウトが連続しています。 1つは左に4列、もう1つは右に8列を占めます。左側にはいくつかのコンテンツがあり、右側にはdiv全体を占めるイメージがあります。 私は小さな画面で左のdivの内容を左のdivの下に行く右のdivの代わりに、オーバーレイのように画像の上に移動させたいと思います。しかし、私はそれを達成するための最善の方法は何で、どのようなものかは分かりません。

<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> 

私は左のdivがオーバーレイとして正しいものの上に行くことを次のCSSを達成するために管理しているが、今プロモーション行の内容は、ヘッダーの上に行くので、私は、promo rowに問題があります同様に、ヘッダーの下に行くためにプロモーション行をプッシュする方法はありますか？

@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

divを移動するのではなく、イメージを背景として複製するのはどうですか？

クラスshow-for-medium.frontpage-header-image-divへの追加は、これが唯一のdivを表示画面サイズ>中（docs）とあなた（s）は、CSSでこのような何かを追加する場合：使用していると

.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財団のSASSバージョン、プレフィックスはすべて必要ありません。ビルド時に追加されます）

中規模+スクリーンの場合は、左のイメージと2つのdivを並べて表示しますが、最初のdivを取得しますが、今は背景の画像を持っています。

ここにはa basic JSFiddleがありますが、画像に調整する必要があります。

Answer 2

右の列は絶対作ってみましょう、右側にそれを貼り、それを左の列よりも低Zインデックスを与えている間：

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

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

これは動作するはずです。そうでない場合は、コード（CSSを含む）の作業スニペットを投稿してください。