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

Question

请考虑以下简单的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>

现在考虑CSS2 10.1.4.1

4. 如果元素具有'position:absolute',则包含块由最近的祖先建立,其中'position'为'absolute','relative'或'fixed',方式如下:

   1. 在祖先是内联元素的情况下,包含块是围绕为该元素生成的第一个和最后一个内联框的填充框周围的边界框.在CSS 2.1中,如果内联元素被分割为多行,则包含的块是未定义的.

或CSS3 3.1.2.2

2. 如果元素具有position:absolute,则包含块由最近的祖先建立,其位置不是static,其方式如下:

   2. 在祖先是内联级别的情况下,包含块取决于祖先的方向属性:

      1. 如果方向是ltr,则包含块的顶部和左侧是祖先生成的第一个框的顶部和左侧内容边缘,而底部和右侧是祖先的最后一个框的底部和右侧内容边缘.

这是不是意味着按钮应该出现在左上方的图像顶部？当按钮出现在图像下方时,我无法理解规范的哪一部分？

Answer 1

内联框（即由具有 的元素生成的框display: inline）的高度由 strut 确定，strut 是一个虚构的框，其高度足以包含计算的 中的文本font-size。请参阅\xc2\xa710.6.1和\xc2\xa710.8.1以及line-heightpropdef（尽管请注意，它确定行内框出现的行框line-height的高度，而不是内联框本身）。

\n\n

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

\n\n

\r\n

\r\n

a.rel{\r\n  position:relative;\r\n}\r\nbutton{\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

a（按钮现在在水平方向上更接近文本，因为除了元素间空白之外，元素中没有其他流入内容，最终会折叠起来。但是，其垂直位置保持不变。）

\n\n

在这里，我向元素添加了一些水平填充a，为其和前面的文本提供了背景，并使按钮半透明，以显示内联框的高度确实是支柱的高度：

\n\n

\r\n

\r\n

span{\r\n  background-color:#f00;\r\n}\r\na.rel{\r\n  position:relative;\r\n  background-color:#00f;\r\n  padding:0 1em;\r\n}\r\nbutton{\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n  opacity:0.5;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

在某些浏览器上，您可以看到内联框的一部分从按钮的角落里露出来；不幸的是，除了“不同的浏览器以不同的方式呈现内联”之外，我无法解释这一点。

\n\n

另请注意，该按钮并未完全出现在图像下方。如果你给图像一个轮廓，你会发现按钮根本不遵守图像的边界（它不应该尝试这样做；毕竟，它是绝对定位的）：

\n\n

\r\n

\r\n

a.rel{\r\n  position:relative;\r\n}\r\nbutton{\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n}\r\nimg{\r\n  outline:thin solid;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n