亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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

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

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元素會(huì)創(chuàng)建一個(gè)包含塊，用于計(jì)算p元素的尺寸和位置 -->
<!-- 可以認(rèn)為包含塊就是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

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.

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.絕對(duì)定位absolute一般是要配合相對(duì)定位relative一起使用的。絕對(duì)定位到底是相對(duì)于哪個(gè)元素進(jìn)行定位的，就給這個(gè)定位父級(jí)添加屬性 position:relative; 
  要是沒有設(shè)置這個(gè)定位父級(jí)，那么絕對(duì)定位的元素就會(huì)默認(rèn)<html>是定位父級(jí)。

2.所有絕對(duì)定位的元素，一定要初始化top/left，即使是0，也要寫上。top: 0; left:0;

3.絕對(duì)定位的元素相當(dāng)于脫離了文檔流，就不再占據(jù)空間了。所以自然也無法再撐起父級(jí)元素的寬高
 
  <!-- 這個(gè)父級(jí)p是定位父級(jí)，那么添加屬性 position:relative; -->
  <p style='position:relative'>  
      <!-- 絕對(duì)定位元素初始化位置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~

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