Question

圆形图像为position: relative，并已使用bottom: 90px属性向上移动。现状图片：

还提供了以下两个<h1>标记的CSS。这是相对定位属性的一些警告吗？

它的行为好像它的边界是位置没有相对位置变化的地方。

这是没有相对重新定位的情况：

是什么给出了？

CSS :(标题是包装，纸标题是较大的h1，名称是文本（h4），图片是圆形图片。）

我试图将标题放在图像边框的正下方，而不必使它们相对位置。

＆＃13;

.content-header {
  //height: 200px;
  width: inherit;
  text-align: center;
  background-color: #547980;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom: solid #9DE0AD 4px;
}
.content-picture {
  display: inline-block;
  border-radius: 100%;
  height: 150px;
  width: 150px;
  position: relative;
  bottom: 80px;
  border: 8px solid white;
}
.Paper-Title {
  font-size: 5vw;
  text-align: center;
  padding-top: 10px;
  margin: 0px;
  padding: 20px 20px 0px 20px;
  color: #9DE0AD;
}
.Name {
  text-align: center;
  font-size: 2.7vw;
  margin: 0px;
  width: 100%;
  padding: 10px 0px 20px 0px;
  color: #9DE0AD;
  font-weight: lighter;
}

＆＃13;

Answer 1

你的怀疑是正确的。通过相对定位，保留元素占用的原始空间。因此，即使您使用top，bottom，left或right来抵消该元素，尽管它会相应地移动，但其原始空间仍然受到其他元素的尊重。

更多详情：

当一个元素相对定位时，为什么元素之间会有空格？

1 个答案: