内联元素中的绝对定位。这种行为是否正确？ [英] Absolute positioning within inline elements. Is this behaviour correct?

问题描述

考虑以下简单的HTML和CSS

a.rel {position ：relative;} button {position：absolute;顶部：0; left：0;}

  Lorem ipsum dolor sit amet< a class =relhref =https://www.google.co.uk> < img src =https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\"> <按钮>我是按钮< /按钮>< / a>  

$ b

现在考虑 CSS2 10.1.4.1

4. 如果元素有'position：absolute'块是由最近的祖先以绝对，相对或固定的'位置'建立的，如下所示：
   
   

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

   
   

blockquote>



或 CSS3 3.1。 2.2









2. 如果元素的位置是：absolute，包含块由最近的祖先建立，其位置不是静态的，如下所示：
   
   

   
   

   2. 如果祖先是内联级别，则包含块取决于祖先的方向属性：
      
      

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

这不表示该按钮应该在左上方的图像顶部 上出现吗？什么部分规范有我不明白当按钮出现在图像下面？

解决方案

内联框的高度也就是说，由 display：inline ）元素生成的框由支柱确定，该支柱是一个虚构的框，其高度足以包含计算的<$ c中的文本$ C>字体大小。请参阅第10.6.1节和§10.8.1，以及 line-height propdef （尽管注意 line-height 确定内联框出现的行框的高度，而不是内联框本身。）





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



  a.rel {position：relative;} button {position：absolute;顶部：0; left：0;}  

  Lorem ipsum dolor sit amet< a class =relhref =https://www.google.co.uk> <！ -  img src =https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png - > <按钮>我是按钮< /按钮>< / a>  

$ b

（该按钮现在水平地接近文本，因为除了元素间空白之外， a 元素中没有其他流内容保留， ）





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





span {background-color：＃f00;} a.rel {position：relative;背景色：＃00F; padding：0 1em;} button {position：absolute;顶部：0;左：0; opacity：0.5;}

 < span> Lorem ipsum dolor坐在amet< / span>< a class =relhref =https://www.google.co.uk> <！ -  img src =https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png - > <按钮>我是按钮< /按钮>< / a>  

$ b

您可以在某些浏览器上看到部分内联框从按钮的角落偷看;不幸的是，我不能解释超越不同的浏览器呈现不同的内联。





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





a.rel {position：relative;} button {position：absolute;顶部：0; left：0;} img {outline：thin solid;}

Lorem ipsum dolor sit amet< a class =relhref =https://www.google.co.uk> < img src =https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\"> <按钮>我是按钮< /按钮>< / a> >

Consider the following simple HTML and 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>

Now consider CSS2 10.1.4.1

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

   1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

or CSS3 3.1.2.2

2. If the element has position: absolute, the containing block is established by the nearest ancestor with a position other than static, in the following way:

   2. In the case that the ancestor is inline-level, the containing block depends on the direction property of the ancestor:

      1. If the direction is ltr, the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.

Doesn't this mean that the button should appear on top of the image to the top left? What part of the spec have I failed to understand when the button appears below the image?

解决方案

The height of an inline box (that is, a box generated by an element with display: inline) is determined by the strut, which is an imaginary box that's tall enough to contain text in the computed font-size. See §10.6.1 and §10.8.1, as well as the line-height propdef (although note that line-height determines the height of the line box on which the inline box appears, not the inline box itself).

Notably, an inline-level child does not affect the height of its parent inline box, even if that child is taller than the strut. The position of the button is therefore relative to the strut of the a element. This also means that the position of the button would be the same if the image were not present to begin with:

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>

(The button is now horizontally closer to the text because there is no other in-flow content left in the a element besides the inter-element whitespace, which ends up being collapsed. However, its vertical position remains the same.)

Here, I've added some horizontal padding to the a element, given both it and the preceding text a background, and made the button semitransparent to show that the height of the inline box is indeed the height of the strut:

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>

You can see part of the inline box peeking out from the corners of the button on certain browsers; I cannot explain that beyond "different browsers render inlines differently" unfortunately.

Note also that the button isn't exactly appearing below the image. If you give the image an outline you'll see that the button isn't adhering to the bounds of the image at all (it shouldn't try to; after all, it's absolutely positioned):

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

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>

这篇关于内联元素中的绝对定位。这种行为是否正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！