文字和颜色的绝对定位

Question

SO，对于输出屏幕的三个疑问：

1. 为什么显示“ Well It Second”（而不是绿色）而不是将绿色全部包裹起来，或者如果相反，则红色应该覆盖全部？
2. 为什么“ Well It is Second”文本与“ Well It is Third”文本重叠，而不是相反？
3. 为什么“ Well It Second”未按我指定的其他div标签居中对齐？

对于Web开发来说还很新，但是我知道绝对定位和相对定位是什么。

https://codepen.io/nalingupta0/pen/

div{
    text-align: center;
    font-size: 40px;
    height: 100px;

}
.first{
    background-color: blue;
}
.second{
    background-color: red;
    position: absolute;
}
.third{
    background-color: green;
}

<div class="first " position: relative>Well It is first</div>
<div class="second">Well It is second </div>
<div class="third">Well It is third </div>

Answer 1

关于绝对定位的知识似乎有些空白。

绝对定位的div通常具有与之关联的属性top，right，left，bottom。这样，您就可以微调将div放置在分配了div的第一个祖先position: relative中的位置。

Q1 ：带有div的{​​{1}}的自动宽度不是100％，而是适合内容。您可以通过显式设置宽度或使用position: absolute来更改此设置。

第二季度：绝对定位的元素始终会从常规内容流中拉出，并放置在其他照常定位的left: 0px; right: 0px;之前。

第3季度实际上，文本实际上居中对齐，只是调整了宽度以适合内容，所以您看不到它。