html - 矩形定位被覆盖

Question

我正在尝试将文本置于居中位置，并与网页顶部保持一定距离。
出现的问题是将位置设置为绝对位置会覆盖 text-align: centered; 命令。
我也无法向上移动文本。
为什么会这样？

h1 {
    position:absolute;
    top:10px;
    text-align:center;
    font-family:impact;
    font-size:80px;
}

Answer 1

将 h1 位置设置为绝对位置会使 h1 元素采用其父元素的相对位置。 Text-align 会将文本设置到其父相对位置的中心。所以他们是相互矛盾的，绝对定位永远是赢家。

让 h1 标签占据绝对位置是个坏主意。相反，我会为 h1 元素创建一个父 div 来占据绝对位置。以这个 jsfiddle 为例。此外，尝试使用绝对定位影响不同元素的各种方式。

    <div id="test">
       <div id="abs">
          <p class="text"> Hello </p>
       </div>
     </div>

https://jsfiddle.net/alexflores67/wb1dh7h9/2/#&togetherjs=C1mAFQldMN

祝你好运!