javascript - Problems with layout in HTML

Question

I don’t understand the position:absoulte attribute well, I hope someone can provide an answer, thank you,

Here I set position:absoulte for child p, and as a result, the space occupied by his parent p disappeared

<p style="width: 40%; background-color: #aa0000; float: left">
      <p >
        <p style="position: absolute">
          111
        </p>
        <p style="position: absolute">
          222
        </p>
      </p>
    </p>
    <p style="width: 20%; background-color: #00aa00; float: left">222</p>
    <p style="width: 40%; background-color: #0000aa; float: left">333</p>

 
 <p style="width: 40%;height: 100px; background-color: #aa0000; float: left">
      <p >
        <p style="position: absolute">
          111
        </p>
        <p style="position: absolute">
          222
        </p>
      </p>
    </p>
    <p style="width: 20%; background-color: #00aa00; float: left">222</p>
    <p style="width: 40%; background-color: #0000aa; float: left">333</p>
    
   

Answer 1

Because when the element is set to absolute, it is already out of the document flow. It does not take up space inside the parent element

Answer 2

In your first example, the parent element has no height set, and the child elements also have no height, so they are not displayed.

position:absolute

It is absolute positioning, separated from the document flow, and you have not set top/right/bottom/left and other values, so the two p’s at the same level will overlap

Answer 3

Four positioning methods of CSS:

1. static: Default positioning (i.e. no positioning, positioning depends on how the document flow is arranged)

2. relative: relative positioning, relative to the original position, the so-called original position, that is, the position of staticpositioning

3. absolute: Absolute positioning, positioned relative to the first parent element other than static positioning. Starting from the current element, the positioned element is searched upwards until the root element. Regardless of whether the first parent element encountered is relative or absolute, or a fixed positioned element, the current element will be positioned relative to that element. And this parent element is not necessarily the first-level parent element of the current element. If no non-static parent element is found, it is positioned relative to the root element html.

4. fixed: Fixed positioning, positioned relative to the browser window

Beginners just need to remember the above.

According to w3school:

An element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block.
Absolutely positioned elements are positioned relative to the nearest positioned ancestor element. If the element has no positioned ancestor elements, then its position is relative to the original containing block.
Absolute positioning makes the element's position independent of the document flow, so it doesn't take up space.

In the quote, I think the exact statement should be "relative to the nearest positioned containing block or the initial containing block", because if the statement is "relative to the containing block", then why must it be at least an element relative . (Should check w3c...)
What is a containment block?
containing block
css Containing Box
Containing block is a virtual rectangular area used by the browser to calculate the position of elements. The starting position for calculating element positioning is the upper left corner of the rectangular area, which is the origin, and the coordinate position is ( 0,0), the top and left of the positioned element are determined relative to the origin. The containing block is the frame of reference for element positioning.
You can think of this rectangular area as the element that created it, but it is not this element, it is just a virtual thing.

<!-- p元素会创建一个包含块，用于计算p元素的尺寸和位置 -->
<!-- 可以认为包含块就是p元素 -->
<p>
    <p>Hello word.<p>
</p>

The containing block is just used to calculate the position and size of the element.

Why does the space occupied by the parent element disappear?

Because the elements set to position: absolute are separated from the document flow (normal flow) and form an independent BFC.
Each BFC in the page is an independent rendering area and does not affect each other. But its position information is still determined by its containing block in normal flow.
The so-called flow is that the browser layouts and renders elements one by one from top to bottom and from left to right in the browser viewport, forming a concept similar to water flow.
By default, a page has only one "flow", which is the document flow (normal flow). If the page has positioned elements and floating elements, a positioned flow and a floating flow will be formed, and the normal flow is formed by the root element of the document html.
You can think of flows as pieces of paper stacked on the desktop. Each piece of paper is a "flow", but these papers are not necessarily the same size.

My understanding of BFC - wmsj100

Answer 4

1. The prime parent element does not have a fixed width and height.
2. When the child element floats, it jumps out of the document flow and cannot open the parent element, so the parent element disappears.

Answer 5

Here you mix absolute positioning and floating, which is not easy for beginners to understand. The two should be separated for easier understanding.

When using absolute positioning, please note:

1.绝对定位absolute一般是要配合相对定位relative一起使用的。绝对定位到底是相对于哪个元素进行定位的，就给这个定位父级添加属性 position:relative; 
  要是没有设置这个定位父级，那么绝对定位的元素就会默认<html>是定位父级。

2.所有绝对定位的元素，一定要初始化top/left，即使是0，也要写上。top: 0; left:0;

3.绝对定位的元素相当于脱离了文档流，就不再占据空间了。所以自然也无法再撑起父级元素的宽高
 
  <!-- 这个父级p是定位父级，那么添加属性 position:relative; -->
  <p style='position:relative'>  
      <!-- 绝对定位元素初始化位置top/left -->
    <p style="position: absolute;top: 0;left: 0">
      111
    </p>
    <p style="position: absolute;top: 0;left: 0">
      222
    </p>
  </p>
  

For the relevant understanding of floating float, please refer to Baidu separately~

Answer 6

If you set a width and height for the parent, the space will still be there