Ich bin mir nicht sicher, wie Elemente mit unterschiedlicher Reihenfolge in Mobil- und Desktop-Versionen positioniert werden sollen

Question

Ich versuche, ein bestimmtes Design zu erstellen. Hier ist das Design auf Desktop und Mobilgeräten:

.section {
  width: 100%;
  position: relative;
}

.section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title {
  color: white;
}

.img {
  width: 100%;
  height: auto;
}

.text-container {
  display: flex;
  flex-direction: column;
  background-color: black;
  color: white;
}

@media only screen and (min-width: 768px) {
  .section__inner {
    width: 175px;
    margin-left: auto;
  }
  .img {
    position: absolute;
    z-index: -1;
    width: 60%;
  }
}

<div class="section">
  <div class="section__inner">
    <h1 class="title">Title</h1>
    <img class="img" src="https://source.unsplash.com/random/" alt="random" />
    <div class="text-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet, porta turpis a, mollis lorem. Nulla consectetur gravida urna, at condimentum dolor.</p>
      <p>Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur. Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus justo at nulla blandit, vel dictum nisi volutpat.
        Morbi placerat augue vel libero feugiat, eu venenatis libero aliquet.
      </p>
    </div>
    <button>Go to the link</button>
  </div>
</div>

Das ist mein Codestift mit dem, was ich bisher entwickelt habe. Ich verstehe nicht, wie ich diese Elemente positionieren und welchen Ansatz ich wählen soll.

Answer 1

首先，您需要为容器元素设置正确的最大宽度和宽度，并允许其在屏幕上居中（根据您的桌面设计）

其次，将 .text-container div 放置在左侧，使其位于图像上方，并且由于它已经位于正确的层次结构中，因此无需设置 z-index code> 它将堆叠在图像的顶部

最后，将按钮移动到 .text-container 中，以便它可以与文本一起定位

这是 CSS 的更新部分：

@media only screen and (min-width: 768px) {
  .section {
    /* Ensure that enough space is available before 1200px, you can tweak this according to your design */
    width: 90%;

    /* So the 90% would only apply below this threshold, you can adjust the value as well if needed */
    max-width: 1200px;

    /* Center this element */
    margin: auto;
  }

  .text-container {
    position: absolute;
    top: 20%;
    left: 50%;
  }

  .img {
    width: 60%;
  }
}

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
    cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet,
    porta turpis a, mollis lorem. Nulla consectetur gravida urna, at
    condimentum dolor.
  
  

    Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur.
    Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit
    nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus
    justo at nulla blandit, vel dictum nisi volutpat. Morbi placerat
    augue vel libero feugiat, eu venenatis libero aliquet.
  
  Go to the link

请注意，调整图像大小时，应保持与参考设计相同的纵横比。