绝对定位的div正在覆盖我的内容

Question

[]

1我正在通过创建位于容器中间的个人资料图片来介绍我的页面，该设计用于移动视图。

保存图片和名称的容器是相对放置的，而图片是绝对放置的，默认情况下，下面包含的内容是静态放置的（我认为），我将其设置为100％宽度居中。

问题：图片正在覆盖其下方的名称，我尝试进行填充以将其放置在下方，但是当图片变大时，它又覆盖了它，我也尝试了媒体查询，但是这样我会断点每100像素，：我认为这种方式不可行

.container {
  position: relative;
  min-height: 350px;
  background-color: black;
}

.pic {
  position: absolute;
  width: 30%;
  top: -30%;
  left: 30%;
}

.content {
  width: 100%;
  padding-top: 8rem;
  text-align: center;
}

<div class="container">
  <div class="pic">img</div>
  <div class="content">name</div>
</div>

Answer 1

是的，是的，绝对定位使图像脱离页面流，并且将其相对于最近的相对定位的祖先进行定位，而不会对其他元素太费心-这实际上是预期的行为。有什么特定的原因可以使您的图片绝对定位？从您写的内容来看，我想您最好的选择是使用flexbox，因为它最容易控制位置。

尽管，说实话，您可能只需要删除绝对位置就可以到这里，因此它再次处于正常流程中，然后将图像div居中放置：

.container {
  position: relative;
  min-height: 350px;
  background-color: black;
  padding: 1rem;
}
.pic {
  width: 30%;
  margin: 0 auto;
}

.content {
  width: 100%;
  padding-top: 3rem;
  text-align: center;
  color: white;
}

<div class="container">
  <div class="pic"><img src="https://picsum.photos/200/150" alt=""></div>
  <div class="content">name</div>
</div>

Answer 2

您不需要任何绝对的定位：

.container {
  position: relative;
  min-height: 350px;
  background-color: black;
  margin-top: 4rem;
  color: white;
  text-align: center;
}
.pic {
  margin-top: -1.8rem;
}

<div class="container">
    <img src="//i.stack.imgur.com/fVW6p.png?s=48&g=1" class="pic">
    <div class="content">name</div>
</div>

Answer 3

为.content添加绝对定位对我有用。