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

Question

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

请参阅live example

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片段：

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

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

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

Answer 1

元素绝对定位，因此适用以下条件：

  

9 Visual formatting model - 9.3.1 Choosing a positioning scheme: 'position' property

     

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

在这种情况下，您尚未设置top / bottom值，因此假定这些值为默认值auto。

  

9 Visual formatting model - 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'

     

<强> '顶部'

     

初始：自动

     

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

---

视觉演示

position:static元素的位置（默认）

  

元素在top / bottom值auto绝对定位时的位置。

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

  

值得注意的是，该元素不是上述图像中的块级元素。它是内联的，因此它出现在同一行。在您问题的图像中，元素出现在下一行，因为它们是块级别。 （这就是为什么它只有一行 - 看看）这是元素显示之间的典型区别。

---

有关详细信息：请阅读链接的文档“Visual formatting model”

Answer 2

    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/

Answer 3

由于使用了

，这种情况正在发生

position:absoulte

在css。