html - 如何在CSS中实现这种布局？ (各部分相互重叠)

Question

<分区>

Answer 1

实现这一点的最优雅(和现代)的方法是使用 display: grid。在网格中，元素可以相互重叠。如果你只是想将标题从正常的 DOM 流中移开，那么 position: absolute + some workaround 就足够了，但要实现 layout，grid 是方法去吧。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.container h1 {
  grid-column: 1/3;
  grid-row: 1/2;
}
.container img {
  grid-column: 2/3;
  grid-row: 1/3;
}
.container p {
  grid-column: 1/2;
  grid-row: 2/3;
}

<div class="container">
  <img src="https://source.unsplash.com/random/200x300">
  </img>
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing</h1>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a
  </p>
</div>