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

如果元素具有'position：absolute'，则包含块由最近的祖先建立，其位置为'absolute'，'relative'或'fixed'，其方式如下：


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

或CSS3 3.1.2.2

如果元素的位置为：absolute，则包含块由最近的祖先建立，其位置不是静态，按以下方式：



在祖先是内联级别的情况下，包含块取决于祖先的方向属性：


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

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

Answer 1

内联框的高度（即由display: inline元素生成的框）由strut确定，strut是一个虚拟框，其高度足以包含计算{{1}中的文本}。请参阅§10.6.1和§10.8.1以及line-height propdef（但请注意font-size确定行框的高度，其中有内联框出现，而不是内联框本身。）

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

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">  <button>I'm a button</button> </a>元素中没有剩余的其他插入内容，最终会折叠。但是，它的垂直位置仍然存在同样的。）

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

span{
  background-color:#f00;
}
a.rel{
  position:relative;
  background-color:#00f;
  padding:0 1em;
}
button{
  position:absolute;
  top:0;
  left:0;
  opacity:0.5;
}

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

另请注意，该按钮并未完全显示在下方图像中。如果你给图像一个轮廓，你会发现按钮根本不符合图像的边界（它不应该尝试;毕竟，它绝对定位）：

<span>Lorem ipsum dolor sit amet</span>
<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>

a.rel{
  position:relative;
}
button{
  position:absolute;
  top:0;
  left:0;
}
img{
  outline:thin solid;
}

Answer 2

按钮IS位于链接的左上角。但是，你错了关于链接的大小。由于a默认显示内联，因此其大小不会增加img的大小，而只会增加行高（由字体大小决定）。

如果增加link元素的字体大小，按钮将会增加。

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

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

2 个答案: