At the time of positioning, we have heard of the son absolute father phase, but if it is the son absolute father does not phase of the situation, we have not considered what he is based on positioning;

Let’s start by saying what an initial containment block is. In the definitive GUIDE to CSS, for floating elements, a containment block is the closest descendant of a block element. For absolute positioned elements, the containing block is the parent of the most recently non-static positioned block element. The initial containment block is the first screen of the page;

Let me explain the problem one by one in code.

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } html{ width: 500px; height: 500px; margin-left: 100px; border: 10px solid black; background-color: red; */} Body {width: 300px;}} body{width: 300px; height: 3000px; border: 10px solid yellow; background-color: blue; */ *doucument is the outermost element of the page. */} #box{position: absolute; left: 0; top: 0; width: 200px; height: 200px; background-color: red; } /* Initial contain block: */ /* After opening the outermost structure of the browser, document first, then the initial include block, HTML, body * / < / style > < / head > < body > < div id = "box" > < / div > < / body > < / HTML >Copy the code

As you can see, I set the position in div, and top and left are both 0; I then pushed the HTML to the left with a margin. You can see that my div doesn’t follow the HTML and body, so it’s not positioned based on the HTML and body. So let’s go ahead and look at the code, where is it positioned;

 #box {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 200px;
     height: 200px;
     background-color: red;
 }
Copy the code

If I change biV’s top to bottom, it goes directly to the bottom of the current viewport. Look at the image below, and pay attention to the scroll bar.

If YOU scroll through the page, you can see that this div, it’s stuck here, it’s not positioned by viewport or the page, but if it were positioned by viewport, it would always be positioned in the lower left corner of the page; If the location were based on the page, the div would be directly at the bottom of the page, but it is not, so it follows that it is not based on viewports and pages.

Now go back to the definition from the beginning: for an absolute position, the parent of the block containing the nearest non-static position. The initial containment block is the first screen of the page;

For an absolutely positioned element, that is, the div, when it sets the absolute position, it will find that the value of position is not static; Here are two keywords position and parent element, let’s use code to explain:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } html { width: 500px; height: 500px; margin-left: 100px; border: 10px solid black; background-color: pink; } body { width: 300px; height: 3000px; border: 10px solid yellow; background-color: rebeccapurple; position: relative; } #box { position: absolute; left: 0; bottom: 0; width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"></div> </body> </html>Copy the code

I set the body to position; So now my div has its target, and I’m going to position it based on that target;

So if my body is not positioned and my HTML is positioned, who is it positioned based on?

  html {
     width: 500px;
     height: 500px;
     margin-left: 100px;
     border: 10px solid black;
     background-color: pink;
     position: relative;
 }
Copy the code

Obviously, divs are now positioned based on HTML, so we now validate the statement that the holding block is the parent of the most recently positioned non-static block element.

So now looking back, when my element is positioned, it will look for the nearest parent block element whose position is not static. If it does not find the parent block, it will be positioned based on the initial containment block (the first screen of the page).