Question

我的问题很简单：绝对定位元素内的内联块元素会发生什么？我有一个例子来说明我的意思。否则很难解释。问题是为什么.icon内的.tag不像上一个.icon（即内嵌和文本右侧）< / p>

中查看

<html>
<head>
    <style>
        .field { position: relative; border: 2px solid black;}
        .tag   { position: absolute; left: 100%; top: -2px; background: black; color: white;}
        .icon  { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;}
    </style>
</head>
<body>
    <a>Some text <span class='icon'>X</span> </a>
    <h2>
        <span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span>
    </h2>
    <h2>
        <span class='field'>Some Text</span>
    </h2>    
</body>
</html>

Answer 1

实际上，图标的行为完全相同。要进行测试，请尝试将样式设置为

display: inline-block; width: 50px;

当您创建标记位置：绝对时，它会导致标记不再具有其父级的100％的自动宽度，而是根据浏览器中的启发式具有可以采用的最小宽度（取决于浏览器））。内联块的作用类似于“内联”，就像图像一样，因此在第一次机会时（就在“标签”一词之后）将其包裹到下一行。

所以简短的回答是：图标的行为相同，但包含它的块不是。

为了强制图标位于同一行，与第一行相同，您可以添加white-space: pre;。请参阅：http://jsbin.com/itole4/6（另请参阅下面的评论）

Answer 2

因为.field的位置为relative，并且您要在.icon position:absolute;top:0px;内添加样式为.field的{{1}} .icon将添加到.field而不是body

的“0px”上

我无法用英语更好地解释＆gt;。＆lt; ，我希望你能理解

Answer 3

它不是定位 - 它是包含＆＃34; icon＆＃34;的元素。 class..in你有一个普通的inline a另一个是嵌套设置，其中父级是一个块级h2这意味着你的＆＃34; inline-bock＆＃34;具有不同的线高和垂直对齐

内联块内部位置：绝对元素

3 个答案: