为什么我的区块与底线对齐？（CSS/HTML）

我试图让一个框与它的包含块左侧对齐：在文本列中添加注释。我的左位置正确，但顶部似乎与线条底部对齐，而不是顶部

见

HTML代码段：

 ante hendrerit. Donec et mollis dolor. Praesent et diam 
 eget libero <span class='left-hanger'>Short</span> 
 <b>egestas mattis</b> sit amet vitae augue.

我想知道为什么它是这样排列的。我对标准中引用的具体细节感兴趣，该标准表明它将以这种方式进行调整。我测试的三种浏览器都同意，所以这似乎是标准行为

---

注意：我对这个问题的“修复”并不感兴趣，而是一个解释。也就是说，为什么我的CSS说要将块的顶部与行的底部对齐？

这是因为使用了

position:absoulte

---

在css中。

元素是绝对定位的，因此以下内容适用：

框的位置（可能还有大小）由“顶部”、“右侧”、“底部”和“左侧”属性指定这些特性指定相对于长方体包含块的偏移量。绝对定位的箱子从正常流量中取出。这意味着它们对以后兄弟姐妹的布局没有影响

在本例中，您没有设置

top

/

bottom

值，因此假定这些值是默认的

auto

“顶级”

首字母：自动

此属性指定绝对定位的框的上边缘距框的包含块的上边缘偏移的距离。对于相对定位的长方体，偏移相对于长方体本身的上边缘（即，长方体在正常流中给定一个位置，然后根据这些属性从该位置偏移）

---

视觉演示 带有

位置的元素的位置：静态
（默认）


使用
auto
的
top
/
bottom
值绝对定位元素时的位置

注意它们是如何垂直放置在同一条线上的吗？这正是文档中描述的行为


同样值得注意的是，在上面的图片中，元素不是块级别的元素。它是内联的，因此它出现在同一行上。在问题中的图像中，元素显示在下一行，因为它们是块级别的。（这就是为什么它是一种离线外观）这是元素显示之间的典型区别


有关详细信息：请阅读链接文档，“
是否要将黄色标签移到段落的左上角？@LeoTAbraham，用例是将标签顶部与粗体文本顶部对齐。然而，我在这里主要是好奇，希望对演示的行为有一个解释。我不想“修复”布局问题，而是要解释为什么我的CSS会产生这样的布局。我在寻找一个具体的解释，解释为什么要将块的顶部对齐到行的底部。所以垂直对齐的差异是由于
块
和
内联
类型之间的差异。块类型位于下一行（当然，这就是块布局的目的）。如果我理解，那么
内联块
也应该根据需要进行顶部对齐。测试这个，它是。
    Please try this code.

    - Put position: relative on p

     #one p {
                 position:relative;
            }

    -Put top:0 on .left-hanger

     .left-hanger {
             display: block;
             position: absolute;
             left: -6em;
             width: 5em;
             top:16px
             background: yellow;
         }

Demo : http://jsfiddle.net/vsok/4a38b/

position:absoulte