CSS - 让左 div 在小屏幕上覆盖右 div答案

【问题标题】：CSS - making left div go over right div as an overlay on small screensCSS - 让左 div 在小屏幕上覆盖右 div
【发布时间】：2017-03-14 11:15:25
【问题描述】：

我在我的项目中使用 zurb 基础，并且我有一个连续 2 个 div 的布局。一个在左侧占据 4 列，另一个在右侧占据 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>

我已经设法通过以下 css 实现了左侧 div 覆盖右侧 div 作为覆盖，但我对 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;
  }
}

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

而不是移动 div；将图像复制为背景怎么样？

将show-for-medium 类添加到.frontpage-header-image-div，这仅在屏幕尺寸> 中等 (docs) 时显示 div，并在您的 (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;
    }
}

（注意，由于您使用的是 Foundation 的 SASS 版本，因此您不需要所有前缀，它们会在构建时为您添加）

因此，对于中 + 屏幕，您可以将两个 div 与左侧的图像并排显示，但对于小屏幕，您只会获得第一个 div，但现在它有一个背景图像。

这里是a basic JSFiddle，不过您需要根据自己的图片对其进行调整。

【讨论】：

是的，我已经实现了和你最后提到的基本相同的东西。

【解决方案2】：

尝试将右列设为绝对值并将其粘贴到右侧，同时赋予其比左列更低的 z-index：

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

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

这应该可行。如果没有，请发布您的代码（包括 CSS）的工作 sn-p。

【讨论】：