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

问题描述

在给定的代码中，在div.text我分配的部分position: absolute中，display: block属性变为非活动状态，我必须设置width: 100%将文本居中对齐。什么原因？
为什么我必须先将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>

标签： css

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

的默认值position是static，它显示元素出现时，或者换句话说：未定位。Absolute定位会将一个元素放置relative到它的第一个定位（不是static）祖先元素。如果没有定位，<body>则它是最上面的元素。这就是需要设置 parent 的position地方relative。从static到relative使其“定位”，现在具有absolute位置的子对象将与其祖先绑定，而不是<body>。来自https://www.w3schools.com/cssref/pr_class_position.asp

...我必须设置 width: 100% 以使文本居中对齐。什么原因？

当您从中删除position: absolute样式时div.text，不会影响display:block（block与相反inline，表示元素不“喜欢”与其他元素相邻）<div>s或分区是块元素并且<span>s是内联的。所以设置display:blockany<div>是多余的。将宽度设置为 100% 会<div>占用整行而不是默认值：尽可能少的空间。不指定宽度不会取消文本居中，它只是居中在<div>完美契合的内部。

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

问题描述

解决方案

推荐阅读