Static: No special positioning, objects follow normal document flow. Attributes such as top,right,bottom,left are not applied.
Relative: Objects follow normal document flow, but will be offset in normal document flow based on attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.
Absolute: objects are out of normal document flow and are absolutely positioned using attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.
Fixed: object is out of normal document flow, use attributes such as top,right,bottom,left to position the window as a reference point, and when scroll bars appear, the object does not scroll. And its cascade is defined by the Z-index property.
How, is still very confused ~ ~ No matter, the following from a few basic concepts to everyone detailed:
What is a document flow?
The document flows by dividing the form from top to bottom into rows and emitting elements from left to right in each row.
There are only three cases where elements are separated from the document flow: floating , absolute positioning , and relative positioning .
Static positioning (statics):
Static, no special positioning, it is the default positioning method of HTML elements, that is, we do not set the element's Position property when the default position value is static, it follows the normal document flow object, the object occupies the document space, the positioning mode, top, right, Bottom, left, Z-index, and so on are invalid properties.
Relative positioning (relative):
Relative positioning, also known as relative positioning, from the literal interpretation, we can see the main characteristics of the property: relative. But is it relative to where? This is a focus, but also the most confusing to me a place, now let us do a test, I think everyone will understand:
(1) Initial non-locating
/****** initial *********/<style type= "Text/css" > #first {width:200px; height:100px; border:1px solid red;} #second {width:200px; height:100px; border:1px solid Blue;} </style><body> <p id= "First" > first</p> <p id= "second" >second</p>< /body>Initial artwork:
(2) We modify the position property of the first element:
<style type= "Text/css" > #first {width:200px; height:100px; border:1px solid red; position:relative; top:20p X left:20px;} /*add position*/ #second {width:200px; height:100px; border:1px solid Blue;} </style>After 20px relative offset:
-->> dashed line is the initial position space
Now you see, relative positioning is the offset of its original position in the document flow , and we know that relative is also following the normal flow of the document, which is not out of the document flow, but its Top/left/right/bottom property is in effect. , it can be said that it is static to Absoult of an intermediate transition property, most importantly, it also occupies the document space, and the occupied document space will not be changed with the Top/right/left/bottom and other attributes, that is, the elements behind it is based on the dotted position (Top/left/right/bottom and so on before the attributes come into effect) , this must be understood.
Well, we know that. The Top/right/left/bottom property is not offset by the document space occupied by the relative positioned element, so does margin/padding cause the document space to be offset? The answer is yes, let's do an experiment together:
(3) Add 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:
Contrast, is not very clear, we first set the outer margin to 20px, then the second element will have to offset the downward 40px, so margin is to occupy the document space! Similarly, you can test the effect of padding yourself!
Absolute Positioning (Absoulte):
Absoulte positioning, also known as absolute positioning, although its name number Yue "Absolute", but its function is closer to the word "relative", why so? Originally, using absoult positioned elements out of the document flow, can only be based on ancestral class elements (parent class above) to locate, and this ancestor class must also be postion non-static way to locate, for example, a element uses absoulte positioning, it will start from the parent class, Look for ancestral elements that are positioned position non-static (note that it must be a direct ancestor), until the relative and static modes are at the outermost layer < The body> label is positioned as the origin, while the Absoulte mode is positioned with
(4) Add Absoulte property:
：
Haha, after reading the above code, careful friend must ask, why absoulte positioning to add top:0; left:0; attribute, this is not superfluous?
In fact, it is absolutely necessary to add these two properties, because if we use absoulte or fixed positioning, we must specify at least one of the left, right, top, and bottom properties, otherwise left/right/top/ The bottom property uses their default auto, which causes the object to conform to the normal HTML layout rules, which are presented immediately after the previous object , simply to become relative, which takes up the document space, This is very important, and many people use absolute to find out that there is no escape from the document flow, this is the reason to pay special attention here ~ ~ ~
Less left/right/top/bottom attribute No, then if we set more? For example, if we set both top and bottom property values, where should the element be shifted? Remember the following rules:
If top and bottom exist together, then only top comes into effect.
If left and right exist together, then only left is in effect.
Since the Absoulte is based on the position non-static elements in the ancestor class, will the margin/padding in the ancestor class have an effect on the position? Let's look at an example:
(5) Add margin/padding attribute to 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;} <p id= "First" >first <p id= "second" >second</p></p>：
It is understood that the margin of the ancestor class will let the absoulte of the subclass follow the shift, while the padding will not let the absoulte of the subclass be shifted. To summarize, the Absoulte is based on the border of the ancestral class.
Note: Absolute (absolute) anchored objects outside the viewable area cause scrollbars to appear. The scroll bar does not appear when you place a relative (relative) anchored object outside the viewable area.
Fixed positioning:
Fixed positioning, also known as stationary positioning, it is the same as the Absoult positioning, all out of the document flow, and can be based on the top, right, left, bottom properties to locate, but the difference is fixed according to the window for the origin of the offset positioning, That is, it does not offset by scrolling the scroll bar.
Z-index Properties:
Z-index, also known as the stacking order of objects, it uses an integer to define the stacking hierarchy, the larger the integer value, it is stacked on top of, of course, this refers to the stack between sibling elements, if the two objects of this property has the same value, then according to their in the order of the HTML document in the Cascade, Written in the back will cover the front. It is important to note that the parent-child relationship is unable to use Z-index to set the upper and lower relationship, must be the child at the top of the parent.
Note: An element with static positioning or no position positioning Z-index property is not valid.
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
