Home > Developer > JavaScript
[Go] Explanation of position attribute (absolute | relative | static | fixed) in CSS, relativefixed
Let's take a look at the definition of position in CSS3 Api:
How about it? I am still confused ~~ It doesn't matter. Here we will detail several basic concepts one by one:
What is a document stream?
Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream.
In only three cases, elements are separated from the document stream, including floating, absolute, and relative positioning.
Static positioning ):
Static: no special positioning. It is the default Positioning Method for html elements. When the position attribute is not set, the default position value is static, which follows the normal Document Stream object, objects occupy document space. In this positioning method, top, right, bottom, left, z-index, and other attributes are invalid.
Relative ):
Relative positioning, also known as relative positioning, can be seen from the literal parsing of this attribute's main features: relative. But what is it relative? This is a key point and a most confusing place for me. Now let's do a test. I think everyone will understand:
(1) The initial position is not determined.
<style type="text/css"> #first { width: 200px; height: 100px; border: 1px solid red; } #second{ width: 200px; height: 100px; border: 1px solid blue;} </style> <body> <div id="first"> first</div> <div id="second">second</div> </body>
Initial source image:
(2) modify the position attribute of the first element:
<style type="text/css"> #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/ #second{width: 200px; height: 100px; border: 1px solid blue;} </style>
After the relative offset of 20px:
--> The dotted line is the initial location space.
Now you can understand,Relative positioning is the offset of the original position in the Document Stream.But we also know that relative positioning follows the normal document stream, which is not separated from the document stream, but its top/left/right/bottom attribute takes effect, it can be said that it is an intermediate transition property from static to absoult. The most important thing is that it still occupies the document space, andThe occupied file space will not change with the offset of top/right/left/bottom and other attributes, that is to say, the elements behind it are located based on the position of the dotted line (before the top/left/right/bottom and other attributes take effect ).This must be understood.
Well, we know that the top/right/left/bottom attribute does not offset the document space occupied by the element located by relative, so will the margin/padding offset the file space? The answer is yes. Let's test it together:
(3) Add the margin attribute:
<style type="text/css"> #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/ #second{width: 200px;height:100px;border: 1px solid blue;} </style>
After setting margin: 20px:
In comparison, is it very clear? first we set the first element's outer margin to 20 PX, then the second element has to be shifted down to 40 PX, so margin occupies the space of the document! Similarly, you can test the padding effect by yourself!
Absolute positioning (absoulte ):
Absoulte positioning is also called absolute positioning. Although its name is "absolute", its function is closer to the word "relative". Why? It turns out that the elements that are located using absoult are separated from the document stream and can only be located based on the ancestor class elements (parent class and above). This ancestor class must also be located in the postion non-static mode, for example, element a uses absoulte to locate the parent class from the parent class and looks for the ancestor class elements that are located in a position non-static manner (note, it must be an immediate ancestor ~), Until the The relative and static methods use the <body> label as the origin location in the outermost layer, while the absoulte method uses the The
(4) Add the absoulte attribute:
:
Haha, after reading the above Code, a careful friend must ask, why is top: 0; left: 0 added to absoulte's positioning?
In fact, adding these two attributes is completely necessary, because if weWhen positioning with absoulte or fixed, you must specify at least one of the left, right, top, and bottom attributes. Otherwise, the left/right/top/bottom attributes use their default values auto, this will cause the object to follow the normal HTML layout rules and be presented immediately after the previous object,In simple words, they all become relative,This is very important because absolute is used to locate and find that the file is not out of the document flow ~~~
If the left/right/top/bottom attribute is missing, what if we set it more? For example, if we set the attribute values of top and bottom at the same time, where should the elements be offset? Remember the following rules:
Since absoulte is located based on the position non-static element in the ancestor class, will the margin/padding in the ancestor class affect the position? Let's take a look at the example first:
(5) Add the margin/padding attribute to the absoulte positioning:
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;} #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;} <div id="first">first <div id="second">second</div> </div>
:
Understand,The margin of the ancestor class offsets the absoulte of the subclass, but the padding does not offset the absoulte of the subclass.. To sum up, absoulte is positioned based on the border of the ancestor class.
Note:An absolute (absolute) Positioning object outside the visible area will cause the scroll bar to appear. The scroll bar does not appear when the relative (relative) Positioning object is placed outside the visible area.
Fixed Position (fixed ):
Fixed positioning, also known as fixed positioning, is the same as absoult positioning. It is out of the Document Stream and can be located based on top, right, left, and bottom attributes, however, the difference is that fixed is offset based on the window for the origin, that is, it will not be offset based on the scroll of the scroll bar.
Z-index attributes:
Z-index, also known as the cascade order of objects, uses an integer to define the hierarchy of stacks. The larger the integer, the more layers are stacked, of course, this refers to the stack of elements of the same level. If the attributes of two objects have the same value, they will be stacked Based on the sequence of their flow in the HTML document, the one written later will overwrite the previous one. It should be noted that the parent-child relationship cannot be set with z-index. The parent-child relationship must be set at the parent level.
Note: The z-index attribute of the element that uses static positioning or does not have position positioning is invalid.
Address: http://blog.csdn.net/chen_zw/article/details/8741365
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
