Reprinted, easiest to understand CSS position Tutorial--10 step diagram of CSS position

CSS Positon, I want to be a web-maker to have encountered, but as to whether it really understand it? I would not have said that, at least I do not know very well the operation of its kernel. Today in the Learn CSS positioning in Ten steps article 10 steps introduced the CSS " position"Static, relative, absolute, float" in the use, think quite interesting. Tidy up a post to share with you. I hope we can enjoy it.

Before I figure out the ten processes, I put the code of the instance on it so that we have an entity reference:

HTML Markup

1 <div id= "Example" >
2 <div id= "Div-before" >
3 <p>id = div-before</p>
4 </div>
5 <div id= "Div-1" >
6 <div id= "Div-1-padding" >
7 <p>id = div-1</p>
8 <div id= "DIV-1A" >
9 <p>id = div-1a</p>
Ten <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam phasellus ultrices Viverra velit.</p>
</div>
<div id= "DIV-1B" >
<p>id = div-1b</p>
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum ID lorem.</p>
</div>
<div id= "div-1c" >
<p>id = div-1c</p>
</div>
</div>
</div>
<div id= "Div-after" >
<p>id = div-after</p>
</div>
</div>

CSS Code

Simply use a little style:

1 #example {float:right;}  

3 #div-before, #div-after {background-color: #88d; color: #000;}  
4 #div-1 {width:400px; Background-color: #000; color: #fff;}  #div -1-padding {padding:10px;}  
5 #div -1a {background-color: #d33; color: #fff;}  
6 #div -1b {background-color: #3d3; color: #fff;}  

Preliminary results:

In order to get a better understanding of the relevant points in the future, I have drawn 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 "Div#div-1", then you need to "Div#div-1" in the A side of the absolute positioning, and in the B page "Div#div-1" do not need to do absolute positioning.

A page "Div#div-1" absolute positioning:

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

Step two: Relative positioning position:relative

relative is called relative positioning, if you give an element a value of postion to "relative", then you can pass "t-r-b-l" (that is, top,right, Bottom,left) To set the positioning value of the element.

There are a few things to note when using relative:

1. When the element is set relative, it is positioned relative to the position of the element itself;
2. 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;
3. 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 "Div-1" down 20px, and move the 40px to the left:

Let's look at the effect:

From the 2nd that can be again confirmed above. The element "Div-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 absolutefor 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 DIV-1A element:

At this time the element "div-1a" is not in the original document flow, and its positioning is relative to the body to be positioned, then we sometimes do not need such an effect, which we element div-1a also want to div-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, we know that the relative positioning of the element "relative" is relative to the element itself positioning, and in the third step we know that the absolute position of the element "absolute" is relative to the body. But it is only normal to satisfy such a condition: " any ancestor element of an absolutely positioned element does not have any" relative "setting, so the reference to an absolutely positioned element is the body", so that "relative" and "absolute" Can play a big role in the combination.

Let's look at one next:

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

Here are a few things to say:

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

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

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

To spend so much time, I just want to make it clear that if an element is absolutely positioned, its 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 body 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 "Div-1":

Now our relative point is not in the third step of the body, but "div-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 Div-1 is positioned relatively, while the div-1a and DIV-1B are absolutely positioned to achieve the effect of two columns of layout:

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 Div-1 element, such as:

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:

Eighth step: Multi-column floating

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

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:

Floating is a very deep topic in CSS, it's just an understatement. In front of "one of the CSS float" and "CSS Float II" also introduced some of the relevant knowledge about float, there is about clear float, you can also click "Clear Float".

Tenth step: Expand Reading

The above is simply a brief introduction to the basics of position in CSS. If you are interested in this piece of knowledge, you can click the relevant link below:

1. The position declaration
2. Absolute positioning Inside Relative positioning
3. CSS Positioning 101
4. Css position:position Static, absolute, relative and fixed of an element
5. Making the Absolute, relative
6. Floatutorial
7. CSS Floats 101
8. All About Floats
9. Float

I hope this simple introduction will help you, if you have better suggestions or sharing can be directly in the comments below to give me a message. Source: W3cplus

Other

The default Position property values for any element are static, but we often use both relative (relative) and absolute (absolute) properties when laying out.

Before we introduce the two properties, we must remember one important conclusion: if you use position to lay out, 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 attributes of the parent element padding, of course, you can use relative, but don't forget the value of padding when you calculate it.

"Absolute: Absolute positioning"
The default reference to the upper-left corner of the browser, with top, right, BOTTOM, Ieft (hereinafter referred to as TRBL) for positioning, with the following properties:
(1) In the case of no TRBL, refer to the upper left corner of the parent, no parent, refer to the upper left corner of the browser, no parent element, but there is text, referring to the last last text in the upper right corner as the origin but constantly open the text, covering and above.
(2) If the TRBL is set and the parent does not have a position attribute (whether absolute or relative), the default is to start at the top left corner of the browser, where the position is determined by TRBL.
(3) If TRBL is set and the parent has a position attribute (whether absolute or relative), the default is to start with the parent's upper-left corner as the origin, and the position is determined by TRBL.
The above three points we can conclude: if you want to use absolute to locate, then we need to clear two points:
First: Set TRBL

Second: Parent Setting position Property

"Relative: Relative positioning"
The default reference parent original point is the original point, and if no parent is the original point at the bottom of the previous element of the text, the mate Trbl is positioned, and the original point of the parent content area is positioned when there is a padding attribute in the parent.
(1) There is no TRBL, reference to the upper left corner of the parent, no parent, referring to the upper-left corner of the browser, no abdominal muscle elements, but there is text, the text at the bottom of the original point for positioning and the text is broken.
(2) Set the TRBL, and the parent does not set the Position property, the parent's upper-left corner is the origin to locate
(3) Set the TRBL, and the parent sets the position property, which is positioned as the origin in the upper-left corner of the parent, but if the parent has a padding attribute, the origin is positioned at the upper-left corner of the content area.

In summary, relative are located in the upper-left corner of the parent, but are affected by padding.

In this way, we can find out why we chose relative to locate the parent element and absolute to locate the inner element. Because we use relative after the layout, it is not just a float layout page, but also can be used TRBL layout. However, if you use the absolute to layout the page, the search div is relative to the browser's upper-left corner of the location, so that the compatibility will be greatly reduced, the user experience is very low. So you can only use a location where an element is positioned inside an element that has a property of absolute.

Reprinted, easiest to understand CSS position Tutorial--10 step diagram of CSS position