还有另一种方法可以在不使用绝对位置的情况下重叠项目吗？

Question

我正在制作我的作品集，其中包含应位于文本后面的背景图形。现在一切看起来都很好，因为我使用绝对定位并通过从顶部定义精确像素来定位所有内容。但是，我知道这是不好的做法，并且在响应能力方面不会是最佳选择。

每当我尝试使用其他选项（例如相对和弯曲）时，项目不再重叠，并且文本放置在背景图形下方。

我知道这是一个愚蠢的问题，但是我到底应该如何制作带有背景图形的响应式布局？

我尝试了flex和相对定位，这不是我需要的结果。

Answer 1

如果不确切知道你想要实现什么，就很难提供帮助，有很多方法可以在 html/css 中重叠事物，但它们都有点不确定和具体。大多数情况下，相对定位是比绝对定位更好的选择。 不确定这是否有帮助，但这里有两个技巧，可能不是最佳实践，但可以在紧要关头发挥作用。

1. CSS 变换

如果您确切地知道希望事物如何重叠，您可以使用 CSS 变换来移动元素。

.box {
  width: 30px;
  height: 30px;
}

#A {
  background: blue;
}

#B {
  background: red;
  transform: translate(15px, -15px);
}

<div class="box" id="A">
</div>
<div class="box" id="B">
</div>

2.将元素放入零大小的 div 中

如果将背景放入高度和宽度为

0px

的 div 中，那么它会漂浮在其他元素后面。

main {
  width: 200px;
  overflow: hidden;
}

#no_size {
  width: 0px;
  height: 0px;
}

#background {
  width: 1000px;
  height: 1000px;
  background: orange;
}

<main>

<div id="no_size">
  <div id="background"></div>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</main>

CSS 布局很难，祝你好运！