内联元素中的绝对定位。 这种行为是否正确？

考虑以下简单的HTML和CSS

a.rel{
  position:relative;
}
button{
  position:absolute;
  top:0;
  left:0;
}

Lorem ipsum dolor sit amet
<a class="rel" href="https://www.google.co.uk">
  <img src=
   "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
  <button>I'm a button</button>
</a>

---

内联框的高度（也就是由带有display: inline的元素生成的框）由支柱决定，该支柱是一个虚构的框，其高度足以包含计算font-size文本。 请参阅§10.6.1和§10.8.1以及line-height propdef（尽管请注意， line-height决定了行内框出现的行框的高度，而不是行内框的高度）。

值得注意的是，即使该子项高于支柱，内联级别的子项也不会影响其父内联框的高度。 因此该按钮的位置相对于a元件的支柱。 这也意味着，如果图像不存在，按钮的位置将是相同的：

a.rel{
  position:relative;
}
button{
  position:absolute;
  top:0;
  left:0;
}

Lorem ipsum dolor sit amet
<a class="rel" href="https://www.google.co.uk">
  <!-- img src=
   "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" -->
  <button>I'm a button</button>
</a>

---

链接左上角的按钮IS。 然而，你误解了链接的大小。 作为a默认显示具有内联的，其大小不通过的大小增加img ，而不是它的只是行高度（由字体尺寸确定）。

如果增加链接元素的字体大小，该按钮将因此上升。

您可以使用开发工具轻松查看链接元素的确切尺寸。

链接地址: http://www.djcxy.com/p/92801.html

上一篇: Absolute positioning within inline elements. Is this behaviour correct?

下一篇: Defragment H264 NAL stream (Originally 1722 avb packets)