CSS Position properties: differences and usages of absolute, relative,static,fixed

when using the Css+p layout, has been to the position four attribute value relative,absolute,static,fixed points is not very clear, so often there will be very depressed results. I studied it today and finally got some idea. Here's a summary:

First look at the definition of each property value:

1.static positioning: Default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).

2.relative(relative positioning): Generates a relatively positioned element, positioned relative to its normal (original) position by the Top,bottom,left,right setting. Hierarchical grading can be done through Z-index.

3.absolute(absolute positioning): Generates an absolutely positioned element, positioned relative to the first parent element other than the static anchor . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. Hierarchical grading can be done through Z-index.

4.fixed position: Generates an absolutely positioned element, positioned relative to the browser window . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. Hierarchical grading can be done through Z-index.

Static and fixed positioning method better understand, do not do analysis here. The following is an analysis of the more relative and absolute applied:

1,relative

　　The element positioned as relative is detached from the normal text stream, but its position in the text stream still exists .

The original point of the default reference parent is the original point, and no parent is the original point in the order of the text flow at the bottom of the previous element, with TRBL, and when the parent has a CSS property such as padding, the original point of the current level is positioned with reference to the original point of the parent content area, with the following properties:

1) If there is no TRBL, in the upper left corner of the parent, when there is no parent, he refers to the upper-left corner of the browser (as in this case, and absolute the first), if there is no parent element, if there is text, the original point at the bottom of the text is positioned and the text is broken (unlike Absolut).

2) If the TRBL is set, and the parent does not set the Position property, it is still positioned as the origin in the upper-left corner of the parent (unlike the Absolut).

3) If you set TRBL, and the parent sets the Position property (either absolute or relative), it is positioned as the origin in the upper-left corner of the parent, and the position is determined by the TRBL (the first half and the absolute). If the parent has the padding attribute, it is positioned as the origin in the upper-left corner of the content area (the second half and Absolut are different).

The above three points can be summed up, regardless of whether the parent exists, regardless of whether there is a TRBL, are located in the upper left corner of the parent, but the parent's Padding property will affect it.
Comprehensive on the face of relative narrative, we can be position attribute to relative p as can be used to locate the normal P TRBL, or as long as we usually layout page of the CSS properties of P plus position:relative, Not just with Float layout page, can also use TRBL to Layout page, or add Position:relative p can also like normal p for layout page, but also can use TRBL layout page. However, the position property is absolute and cannot be used to layout the page, because all p is positioned relative to the upper-left corner of the browser, so it can only be used to position an element in the interior of an element that has a property of absolute, if used for layout.

　　　　 Top The distance the object is shifted downward from its original position , bottom both top Work.

Left , right < Span style= "color: #009900;" The distance to the left offset of the object relative to its original position, There are left it works.

1:

The layer of the yellow background is positioned as relative, and the red border area is its position in the normal flow. After positioning it through top and left, the position of the gray background layer shows that its normal position still exists.

2,Absolute

The layer positioned as absolute is out of normal text flow, but the difference from relative is that its position in the normal stream no longer exists .

This attribute has always been misleading. It is actually wrong to say that when the position property is set to absolute, it is always positioned according to the browser window. In fact, this is the feature of the fixed attribute.

1) If there is no trbl (top, right, bottom, left), and in the parent's upper-leftmost corner, when there is no parent, he is referring to the upper-left corner of the browser, if there is no parent element, there is text, Position the origin in the upper-right corner of the last text in front of it but keep the text open, covering the top.
2) If you set TRBL, and the parent does not set the Position property, the current absolute is positioned as the original point in the upper left corner of the browser, and the position is determined by TRBL.
3) If you set TRBL, and the parent sets the Position property (either absolute or relative), it is positioned as the origin in the upper-left corner of the parent, and the position is determined by TRBL. Even if the parent has the padding attribute, it does not work, saying simple point is: it only adhere to a point, the upper left corner of the parent is the origin of the location, the parent's padding has no effect on it at all.

The above three points can be summed up, if you want to set a positioning attribute to absolute element in its parent element, only meet two conditions:

First: Set TRBL

Second: Parent Setting position Property

This summary of the above is very important to ensure that you are using Absolue layout page, not dislocation, and with the size of the browser or the size of the display resolution, without change.

As long as there is a little unsatisfied, the element will be in the upper left corner of the browser as the origin, this is a beginner easy to make mistakes, has positioned the plate, when the size of the browser changes, the parent element will change, but set the position property for the absolute of the plate and the parent element position changes, dislocation, This is because the element is in the upper-right corner of the browser as the Origin point.
Beginners are very easy to err is, do not know the Position property for the absolute plate, if you want to locate the parent plate, and when the size of the browser changes or the resolution of the display, the layout does not change, it is necessary to meet two conditions, as long as there is a little unsatisfied, The element will be the origin in the upper left corner of the browser, causing the page layout to be misplaced.

TopThe value representsThe distance between the upper border of the object and the top of the browser window,Bottom The distance between the lower border of the object and the bottom of the browser window, There are top function; if Neither is specified vertical hold position unchanged

Left The distance between the left border of the object and the left side of the browser window, right both simultaneous existence left it works; if both none specified flat hold position unchanged.

　　　　At the same time as the Position property value is absolute, if there is a first-level parent object (either a parent object or a grandparent object, or a higher generational, as the Position property value is relative, the relative browser window positioning above will becomes relative to the parent object positioning , which is helpful for precise positioning.

3. The main difference between relative and absolute

First, the presence or absence of a position in the normal flow that has already been mentioned above.

Second, therelative positioned layer is always relative to its nearest parent element, regardless of its parent element's positioning method . 3:

In the figure, the red background layer is relative positioned, and its immediate parent element green background layer is the default static location. The position of the red background layer is a relative green background layer top, left 20 elements. If the red background layer is positioned as absolute, the situation is as follows:

As you can see, the red background layer still defines top:20px;left:20px, but its relative elements change to a yellow background layer that is positioned absolute or relative. Therefore, the layer that is positioned for absolute is always the parent layer of absolute or relative relative to its nearest definition , and the parent layer is not necessarily its immediate parent. If absolute or relative are not defined in their parent layer, they are positioned relative to the body.

In addition to top, left, right, and bottom positioning, the margin attribute value is defined in accordance with the above rules.

Summarize:

An element with a property of relative can be used to lay out a page, and an element with a property of absolute is used to position an element in its parent, since an element with property absolute is used to position an element in the parent, without TRBL. At this time, according to the third article of Absolute, if the parent element does not have a position attribute then the absolute element will be detached from the parent element, but if it is a layout page, the parent element position property cannot be absolute. Otherwise, the top left corner of the browser will be the origin, so the position property of the parent element can only be relative!

　　If you use position to layout a page, the position property of the parent element must be relative, and the element that is positioned somewhere inside the parent, preferably absolute, because it is not affected by the padding attribute of the parent element, but you can also use position , but don't forget the value of padding when you calculate it.

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.

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.

Z-index Property

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.