CSS

Question

我在我的项目中使用 zurb foundation，我的布局有 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 作为覆盖覆盖右侧，但我对 promo row 有疑问，从现在开始促销行的内容也超过 header，我怎样才能将促销行推到 header 以下？

@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;}

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

Answer 2

而不是四处移动 div；将图像复制为背景如何？

将 class show-for-medium 添加到 .frontpage-header-image-div，这只会显示 div 如果屏幕大小 > 中等 (docs) 并添加类似这样的内容在你的 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 作为小屏幕上的覆盖

CSS - making left div go over right div as an overlay on small screens

html

zurb-foundation