Question

我在我的项目中使用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;
  }
}

Answer 1

尝试使用正确的列绝对并将其粘贴到右侧，同时给它一个比左列更低的z-index：

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

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

这应该有效。如果没有，请发布您的代码的工作片段（包括CSS）。

Answer 2

而不是移动divs;如何将图像复制为背景？

将课程show-for-medium添加到.frontpage-header-image-div，这仅显示div if screen size＆gt;中（docs）并在你的（c）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;
    }
}

（N.B。当您使用Foundation的SASS版本时，您不需要所有前缀，它们会在构建时添加）

因此，对于中型+屏幕，您可以将两个div与左侧的图像并排放置，但是对于小型，您只能得到第一个div，但现在它有一个背景图像。

此处为a basic JSFiddle，您需要将其调整为您的图片。

CSS - 使得div div在右侧div上作为小屏幕上的叠加

2 个答案: