绝对定位 div 覆盖了我的内容

Question

[]

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

保存图片和名称的容器是相对定位的，而图片是绝对定位的，下面包含的内容默认是静态定位的（我认为），我把它设为 100% 宽度能够居中。

问题：图片覆盖了它下面的名字，我试着做一个填充来把它放在下面但是当图片变大时，它又覆盖了它，我也试过媒体查询但是这样我会做一个每100px断点，：我觉得这样不实用

.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

是的，嗯，绝对定位将图像从页面流中取出并相对于最近的 relatively-positioned 祖先进行定位，而不是太在意其他元素 - 所以这实际上是预期的行为。您是否有任何特定原因希望您的图片绝对定位？根据您所写的内容，我认为您最好的选择是使用 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 添加绝对定位对我有用。

绝对定位 div 覆盖了我的内容

absolutely positioned div is covering my content

html

css

responsive