【问题标题】:What's the exact containing block of an absolutely positioned element in the case the containing block is inline?如果包含块是内联的,那么绝对定位元素的确切包含块是什么?
【发布时间】:2017-01-09 13:16:23
【问题描述】:
<style type="text/css">
body > div {
display: inline;
position: relative;
}
body > div > div {
position: absolute;
}
</style>
<div>
<div></div>
</div>
内部 div 的确切包含块是什么?
在祖先是内联元素的情况下,包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在 CSS 2.1 中,如果内联元素被拆分为多行,则包含块是未定义的。
上面文字中“为该元素生成的第一个和最后一个内联框的填充框周围的边界框”是什么意思?
【问题讨论】:
标签:
html
css
css-position
【解决方案1】:
内联元素不能“包含”传统意义上的块级框。发生的情况是,该内联元素被拆分为单独的内联框,这些内联框存在于匿名块框围绕该块级框。见section 9.2.1.1 过去的第一个例子:
当内联框包含流内块级框时,内联框(及其在同一行框内的内联祖先)在块级框(以及任何连续或连续的块级兄弟姐妹)周围被打断。仅由可折叠的空格和/或流外元素分隔),将内联框分成两个框(即使任一侧为空),一个位于块级框的每一侧。断点前和断点后的行盒被封闭在匿名块盒中,块级盒成为这些匿名盒的兄弟。当这样的内联框受到相对定位的影响时,任何由此产生的平移也会影响内联框中包含的块级框。
(这里没有翻译,所以最后一句不恰当。)
但是,您的情况有点特殊,因为 only 在外部 div 的开始标记和内部 div 的开始标记之间,以及内部 div 的结束标记和结束标记之间外层 div 是元素间空白(包括换行和缩进),一般情况下会得到collapsed。所以生成的内联框最终是
- 为空,并且
- 同位:与strut同位。
并且由于内联元素没有填充,空内联框的填充框的长度被测量为零,乘以行高。 (请注意,当您检查外部 div 时,某些浏览器开发工具可能会将其呈现为由十字准线标记的单个点。)内部(绝对定位)div 的包含块由这些填充框组合的周长定义,并且任何内部 div(上、右、下、左)上的偏移量是相对于该周长的。但是请注意,由于内联框实际上没有内容,因此内部 div 的实际位置与外部 div 的实际位置相同,有外部 div 有内容。