Question

在给定的代码中，在div.text部分中，当我分配position: absolute时，display: block属性变为非活动状态，我必须设置width: 100%以使文本居中对齐。什么原因？
为什么必须首先将容器的position属性设置为relative才能将子元素的位置设置为absolute？如果未设置父容器的position: relative，则该元素相对于body标签定位。为什么？

body,
html {
  height: 100%;
  margin: 0;
}

div.first-div {
  background-image: url(louis-lo-275893-unsplash.jpg);
  height: 100%;
  opacity: 0.7;
  background-size: cover;
  position: relative;
}

div.text {
  position: absolute;
  top: 45%;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
}

span.border {
  color: cornsilk;
  font-family: "Lato", sans-serif;
  letter-spacing: 8px;
  font-size: 50px;
  background-color: black;
  padding: 8px 30px;
  height: 100px;
}

<body>
  <div class="first-div">
    <div class="text">
      <span class="border">Hello</span>
    </div>
  </div>
</body>

Answer 1

1。绝对位置给定宽度后面的原因是绝对位置和相对位置的默认位置为left，top，因此我们必须指定宽度以执行任何中心对齐动作。同样，也不需要为类提供display block属性，默认情况下它是block，如果您执行一些切换操作，则必须将该属性应用于任何css。

无论何时我们将绝对位置应用于子级div，都必须将相对位置分配给父级，因此，如果我们不将位置相对属性应用于父级，那么我们将限制绝对位置操作的are ，子CSS具有一些top，bottom，left，left和right属性，那么它将显示html正文中的某些位置。

为更好地了解css位置属性，请点击附件链接以了解位置属性的性质。 enter link description here

Answer 2

为什么我必须首先设置position属性...

position的默认值为static，它将按显示的元素显示或换句话说：未定位。 Absolute定位会将元素relative放置到其第一个定位（而不是static）祖先元素。如果未放置任何内容，则为<body>或最顶层的元素。这就是将父项position设置为relative的需要。从static到relative使其“定位”，现在具有absolute位置的子对象将绑定到其祖先而不是<body>。 来自https://www.w3schools.com/cssref/pr_class_position.asp

...我必须设置宽度：100％以使文本居中对齐。是什么原因？

从position: absolute删除div.text样式时，它不会影响display:block（block与inline相反，表示元素不会“ <div>s或除法是块元素，而<span>s是内联。因此，在任何display:block上设置<div>是多余的。将宽度设置为100％会使<div>占据整行，而不是默认行：尽可能少的空间。不指定宽度不会取消文本居中，它只是恰好位于<div>的内部居中。

为什么位置属性会影响显示属性？

2 个答案: