Description of the positioning method using the Position property in CSS

This article mainly introduces the use of position attribute in graphic CSS, focusing on the role of relative positioning and absolute positioning in the page layout, the need for friends can refer to the following

The positioning mode in CSS specifies where a box should be positioned on the overall layout and how it will affect the surrounding boxes. The pattern includes regular document flow, floating, and several types of position positioned elements.
Of these, the CSS position property can take 5 kinds of values:
Position:absolute
Position:relative
Position:fixed
Position:static
Position:inherit
Static is the default property value of position. Any elements that have position:static applied are in the regular document flow. Where it is and how it affects the surrounding elements are determined by the box model.
A static positioned element ignores all top,right,bottom,left and the values declared by the Z-index property. In order for your element to use these five attributes, you need to first apply one of these three values for its Position property: absolute,relative,fixed
The position value is the same as the inherited value for all other properties of the inherit element, which inherits the position value of the parent element.

In order to better understand the latter, we will first draw the DOM sketch of this example:

Above the DOM diagram, I think we must be very easy to understand, the following is the main look at the use of position.

First step: position:static

The default value for the "position" property of all elements in the CSS is "static" because there is no need to explicitly set "position:static" for each element. At this point you will ask, is this attribute value meaningless? Not really, he will play a big role in CSS. Let's look at an example:

For example, you have two pages, and there is "p#p-1", then you need to "p#p-1" in the A side of the absolute positioning, and in the B page "p#p-1" do not need to do absolute positioning.

A page "p#p-1" absolute positioning:

#p-1 {       position:absolute;      }

At this point in the B page do not want absolute positioning, then we must be in your style explicitly reset the "#p-1" postion property is "static"

Body. B #p-1 {       position:static;      }

Step two: Relative positioning position:relative

Relative is called relative positioning, and if you assign an element a value of postion to "relative", you can set the element's positioning value by "t-r-b-l" (that is, top,right,bottom,left).

There are a few things to note when using relative:

When the element is set relative, it is positioned relative to the position of the element itself;
When the element is set to relative, it can change the current position of the element through "t-r-b-l", but after the element is shifted, the same point has the original physical space bit;
When the element is set to relative, the element will not change anywhere without any "t-r-b-l" setting.
The above three points 1th and 3rd is a better understanding, so now for 2nd, let's look at an example of the operation:

Based on the above, we move the "p-1" down 20px, and move the 40px to the left:

#p-1 {        position:relative;        top:20px;        left:-40px;       }

Let's look at the effect:

From the 2nd that can be again confirmed above. The element "P-1" moves down 20px, moves the 40px to the left, and its position changes, while the physical space occupied by the element is still present, while the other element is relatively positioned without affecting the other neighboring elements.

Step three: Absolute positioning position:absolute

Absolute is the third attribute value in position, and if you specify absolute for an element, the entire element floats out of the document stream, and the physical space of the element itself disappears at the same time. Unlike "relative", it has the original physical space.

Let's take a look at an example of absolute positioning on the P-1A element:

#p -1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }

At this time the element "p-1a" is not in the original document flow, and its location is also relative to the HTML to locate, then we sometimes do not need such an effect, which we element p-1a also want to p-1 is absolute positioning, then how to do? At this point, we should play the second step of the "relative" role.

The fourth step: the combination of relative and absolute

In the second step, it is known that the relative positioning of the element "relative" is relative to the element itself, whereas in the third step you know that the element absolutely locates "absolute" relative to the HTML. But it is only normal to satisfy such a condition: "Any ancestor element of an absolutely positioned element does not have any" relative "or" absolute "settings, so the reference to an absolutely positioned element is HTML", in this way, "relative" and " The combination of absolute "can play a big role.

Let's look at one next:

As an example to illustrate the relationship between "relative" and "absolute", first of all there are three p in the body, and their three P relationship is "p-1>p-2>p-3", and in p-3 has such an absolute positioning:

. p-3 {       position:absolute;       left:0;       top:0;      }

Here are a few things to say:

1, p-1 and p-2 are not set "position:relative", at this time our p-3 absolutely positioned after the drift to the "p-3c" position;

2, now we add a "position:relative" in the p-2 element, at this time our p-3 absolutely positioned after the drift to the "p-3a" position;

3, then the relative positioning of the settings for the p-1 element, at this time P-3 absolutely positioned after the position of the p-3b.

To spend so much time, I just want to make it clear that if an element is absolutely positioned, the reference is based on whether the nearest element is set relative to its position, if there is a setting that will be positioned to its nearest element, and if there is no relative positioning element for its ancestor, the HTML is always found. It sounds like a bit of a mouthful, I don't know if you can understand what I'm talking about. If you do not understand you can refer to or the following example effect:

Back to the example above, if we add a "relative" to "p-1":

#p-1 {       position:relative;      }      #p -1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }

Now our relative point is not in the third step of the body, but "p-1", we look at the change with the third step:

Fifth step: Relative and absolute for layout effects

This step is just to demonstrate two layouts that are implemented using relative positioning and absolute positioning. On the previous basis, the p-1 is positioned relatively, while the p-1a and P-1B are absolutely positioned to achieve the effect of two columns of layout:

#p-1 {       position:relative;      }      #p -1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }      #p -1b {       position:absolute;       top:0;       left:0;       width:200px;      }

Such a production is only to illustrate the role of absolute, if only to achieve the above effect, may not be perfect in the actual production, in order to make it more perfect, on this basis we are looking at the following step.

Sixth step: Set the fixed height

To make the layout more suitable, you can set a fixed height on the p-1 element, such as:

#p-1 {       position:relative;       height:250px;      }      #p -1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }      #p -1b {       position:absolute;       top:0;       left:0;       width:200px;      }

By contrast, we don't know how much the element content height will be, so setting a fixed height here is also a dead point in our practice, which is not recommended by individuals. We can do it in other ways if we want to.

Seventh Step: Float

The first two steps, using absolute positioning are not ideal, then we can consider using float to solve. We can use float on an element, let the element left or right, and can also use text around the periphery of the element (this effect is particularly useful in text around the picture). Here's a mock-up:

#p -1a {       float:left;       width:200px;      }

Eighth step: Multi-column floating

The above shows a column float, followed by a look at the multi-column changes:

#p -1a {       float:left;       width:150px;      }      #p -1b {       float:left;       width:150px;      }

Floating and absolute positioning in comparison, now solves its highly adaptive problem, but there is also a problem, floating also destroyed the original document flow of the element, so that its parent element collapsed, then in order to solve this problem, we need to clear the float.

Nineth Step: Clear Floating

In order for the parent element of a floating element not to be in a collapsed state, we need to clear float the floating element:

#p -1a {       float:left;       width:190px;      }      #p -1b {       float:left;       width:190px;      }      #p -1c {       clear:both;      }