时间戳

首页 > 解决方案 > 如何使用 flexbox 将一个 div 覆盖在另一个 div 上？

html - 如何使用 flexbox 将一个 div 覆盖在另一个 div 上？

问题描述

我已经制作了两个 div，但无法将第一个放在第二个上以获得我想要的效果，甚至不知道这是否可以像我正在做的那样使用 flexbox 来实现。我也尝试在我想要覆盖的元素上使用 z-index，但它没有用。关于如何做的任何想法？

这是它的样子： 在此处输入图像描述

HTML

<div class="wrap-container">
<div class="row section-2-about">
            <div>
              <img
                src="bookpicture.png"
                class="bookpicture"
                max-width="800"
                height="550"
              />
            </div>
            <div class="about-me">
              <div><h1 class="about-me-title">About me</h1></div>
              <div class="about-me-text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
                quis, sem.
                <p>
                  Nulla consequat massa quis enim. Donec pede justo, fringilla
                  vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                  ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
                  eu pede mollis pretium. Integer tincidunt. Cras dapibus.
                </p>
                Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
                tellus.
              </div>
            </div>
          </div>
          <div class="row section-3-about">
            <div class="row"></div>
          </div>
        </div> 
</div>

CSS

.wrap-container {
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.section-2-about {
  height: 100px;
  justify-content: center;
}

.bookpicture {
  padding-right: 100px;
}
.section-3-about {
  height: 700px;
  background-color: rgba(234, 203, 193, 0.3);
}

.about-me-title {
  font-family: "Ibarra Real Nova", serif;
  align-items: center;
  color: rgba(40, 44, 48, 1);
  font-weight: bold;
  text-align: left;
  font-size: 40px;
  padding: 300px 0 0 50px;
}

.about-me-text {
  width: 400px;
  padding-left: 50px;
  font-family: "Lato", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 13px;
}

标签： htmlcssflexbox

解决方案

解决方案是position: relative与 flexbox 结合使用。

非常简单的技巧 - 使用flexbox（两个 cols 布局）==> 更改图像position: relative，top: -70px例如（不absolute）。

完毕 ：）

片段

它看起来与您的示例完全相同。

body{
  margin: 0px;
}
.section{
  padding: 20px 20px;
  background: #f8efed;
}

.container{
  max-width: 1180px;
  margin: auto 5px;
}

.flex{
  display: flex;  
}

.col{
  flex-basis: 50%;
}

.image{
  text-align: center;
  padding: 10px;
}

/* "The trick */
.image img{
  position: relative;
  top: -70px;
  opacity: 0.7;
}
<div style="height: 100px;"></div>
<main class="section">
  <section class="container">
    <div class="flex">
      <div class="col">
        <div class="image">
          <img src="https://picsum.photos/200/100"/>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <h2>Hello world</h2>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>
      </div>
    </div>
  </section>
</main>

结构：

大纲： 父级（带顶部/底部填充的部分）- 放置容器内部（设置最大宽度）- 放置 flexbox 内部有两个列。对于左列，将图像位置设置为relative负值。像魔术一样工作+响应+非常容易处理。（可以很容易地在引导程序或任何其他 CSS 框架上实现）。

位置：绝对 - 为什么不

您也可以通过位置来解决这个问题absolute（并将 cols 位置设置为相对） - 但它的响应性较差 + 更难对齐对象 + 图像下方内容的高度折叠（“噩梦”）。

推荐阅读