Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
577 views
in Technique[技术] by (71.8m points)

html - 绝对定位的孩子中的内容是否被认为是最近的绝对定位祖先的一部分?(Is content in absolutely positioned children considered part of the nearest aboslutely positioned ancestor?)

consider the following simple code: (考虑以下简单代码:)

 body { background-color: #990e82; } #header { background-color: #579900; position: absolute; } #inside { position: absolute; top: 0; left: 0; } 
 <body> <div id="header"> <div id="inside">hjhkjh</div> </div> </body> 

As it is possible to see in the attached snippet of the result, the outer div element's bg-color is not represented in the resulting page. (由于可以在附接到看到片断结果,外div元素的BG-颜色没有在所得的页面表示。) Rather, the only color seen is the body's bg-color . (相反,唯一看到的颜色是人体的bg颜色 。) I know the default height of block elements is determined by its content, and therefore it would seem that although the inner div element has text content, the inner div (being absolutely positioned) isn't actually considered part of the outer div element - aka, the outer div has no content. (我知道块元素的默认高度由其内容决定,因此似乎内部div元素具有文本内容,但内部div(绝对定位)实际上并未被视为外部div元素的一部分-aka ,外部div没有内容。)
This surprises me, as the outer element is also positioned absolutely. (这让我感到惊讶,因为外部元件也绝对定位。) As far as I know, this would make the outer div the containing block for the inner div for all intents and purposes (as defined in the spec - 10.1.4), and therefore "supply" the inner content to the outer div and stretch it. (据我所知,这将使外部div成为内部div的所有目的和用途(如规范 -10.1.4中所定义)的包含块,因此将内部内容“供应”给外部div并拉伸它。) This would ostensibly result in the outer div's bg-color to show. (表面上,这将导致外部div的bg颜色显示。)
I would love for a clarification regarding the relationship between containing blocks, and the actual content contained in said blocks. (我希望澄清有关包含块之间的关系以及所述块中包含的实际内容。)

  ask by notepadNinja translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

As far as I know, this would make the outer div the containing block for the inner div for all intents and purposes (as defined in the spec - 10.1.4), (据我所知,这将使外部div成为内部div的包含块,用于所有意图和目的(如规范-10.1.4中所定义),)

This is true, the containing block of inside is header (是的, inside的包含块是header)

and therefore "supply" the inner content to the outer div and stretch it. (因此将内部内容“提供”到外部div并进行拉伸。) This would ostensibly result in the outer div's bg-color to show (表面上这将导致外部div的bg颜色显示)

inside is also an inner content of header but it has position:absolute so it's out of the flow and doesn't affect the layout of it's containing block. (inside也是标头的内部内容,但是它具有position:absolute因此它不在流程中,并且不会影响其包含块的布局。)

From the specification you can read: (从规范中,您可以阅读:)

In the absolute positioning model, a box is explicitly offset with respect to its containing block. (在绝对定位模型中,框相对于其包含的块显式偏移。) It is removed from the normal flow entirely (it has no impact on later siblings). (它已从正常流中完全删除 (它对以后的同级没有影响)。) An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. (绝对定位的框为正常流子和绝对(但不固定)定位的后代建立了一个新的容纳块。) However, the contents of an absolutely positioned element do not flow around any other boxes. (但是,绝对定位的元素的内容不会在其他任何框周围流动。) They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes. (它们可能会使另一个盒子的内容模糊(或自身被遮盖),具体取决于重叠盒子的堆叠高度。)

Then you can read here how width is calculated for absolute element and you will consider this rule: (然后,您可以在此处阅读如何计算绝对元素的宽度,并考虑以下规则:)

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; (如果'left','width'和'right'的全部三个均为'auto':首先将'margin-left'和'margin-right'的所有'auto'值设置为0。然后,如果'direction'为建立静态位置包含块的元素的属性是'ltr',将'left'设置为静态位置并应用下面的规则编号3;) otherwise, set 'right' to the static position and apply rule number one below. (否则,将“ right”设置为静态位置并应用下面的规则编号1。)

  1. ... then the width is shrink-to-fit . (...然后宽度缩小以适合 。) ... (...)

Then you can see the detail of shrink-to-fit which is similar to inline-block, float, etc and since we have no in-flow content, it will result to 0 like you noticed. (然后,您可以看到与内嵌块,浮动等类似的缩小至配合的细节,并且由于我们没有流入量,因此如您注意到的那样,结果将为0。)

Same logic for height calculation. (高度计算的逻辑相同。)


Basically, the containing block definition and how width/height are calculated are two different concepts. (基本上,包含块的定义以及宽度/高度的计算方式是两个不同的概念。) The containing block define a kind of reference for an element in order to place it or calculate its width/height but being a containing block of an element doesn't mean that the width/height will be different from 0. (包含块为元素定义了一种引用,以便放置元素或计算元素的宽度/高度,但是作为元素的包含块并不意味着宽度/高度将不同于0。)

Here is another intresting example where I will make the inside element width:100% and it will be equal to 0 because its containing block is having a width equal to 0 (our reference for calculation) (下面是另一个intresting示例,其中我将会使内部元件width:100%这将是等于0 ,因为其包含块由具有的宽度等于0 (我们的计算基准))

 body { background-color: #990e82; } #header { background-color: #579900; position: absolute; } #inside { position: absolute; top: 0; left: 0; width: 100%; background: red; } 
 <body> <div id="header"> <div id="inside">hjhkjh</div> </div> </body> 


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...