时间戳

首页 > 解决方案 > 文字和颜色的绝对定位

css - 文字和颜色的绝对定位

问题描述

SO，对于输出画面的三个疑惑：

  1. 为什么显示“嗯，它是第二个”的文字而不是绿色包裹它，或者如果它是相反的，红色应该覆盖整个？
  2. 为什么“嗯，它是第二个”的文本与“嗯，它是第三个”的文本重叠，而不是其他方式？
  3. 为什么“Well It is 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>

标签： css

解决方案

关于绝对定位似乎存在一些知识空白。

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

Q1：A divwithposition: absolute没有 100% 的自动宽度，而是适合内容。您可以通过显式设置宽度或使用left: 0px; right: 0px;.

Q2：绝对定位的元素总是从内容的常规流中拉出来，放在其他div像往常一样定位的元素之前。

Q3文字实际上是如你所想的那样居中，只是调整了宽度以适应内容，所以你看不到它。

推荐阅读