时间戳

首页 > 解决方案 > 在具有背景图像的列中进行两列转换的最佳方法是什么？

css - 在具有背景图像的列中进行两列转换的最佳方法是什么？

问题描述

例如，我想要一个两列英雄部分，其中第一列是标题/副标题/动作，第二列是图像，但是当响应较小的屏幕尺寸时，而不是在另一个之上制作一个，我希望它们重叠，以便图像现在位于标题/副标题/动作后面，而不是下面。

我在想类似的东西：

<div class="grid grid-cols-2 bg-image">
  <div class="grid-span-2 md:grid-span-1 md:mr-auto">
    // Title
    // Subtitle
    // Action Button
  </div>
</div>

但这会使图像始终位于 div 的顶部，而不是像桌面尺寸那样的列。

标签： cssvue.jstailwind-css

解决方案

当到达小屏幕断点时，您可以通过使用图像定位和 z-index 来实现这一点：

<div class="container">
  <div class="div1">Foo</div>
  <div class="div2">Bar</div>
</div>

.container {
  display: flex;
  position: relative;
}
.container > div {
  width: 600px;
  height: 300px;
}
.div1 {
  background-color : #f00;
  z-index: 2;
}
.div2 {
  background-color : #0f0;
  z-index: 1;
}
@media only screen and (max-width: 1200px) {
  .div2 {
    position: absolute;
    right: 0;
  }    
}

https://jsfiddle.net/bhksd1yn/

推荐阅读