The position tutorial of CSS, which is the easiest to understand. The position and positioncss of CSS are illustrated in ten steps.

The position tutorial of CSS, which is the easiest to understand. The position and positioncss of CSS are illustrated in ten steps.
I think I have met CSS positon as a Web maker, but do I really know about it? I won't say that. At least I don't know much about the running of the kernel. Today, in the Learn CSS Positioning in Ten Steps article, we will introduce the"Position"Static, relative, absolute, float" is very interesting. I sorted out the post to share it with you. I hope you will like it.

Before illustration of these ten processes, I put the code of the Instance so that you can refer to the following entities:

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> 
10              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> 
11         </div> 
12      <div id="div-1b"> 
13              <p>id = div-1b</p> 
14              <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> 
15        </div> 
16         <div id="div-1c"> 
17             <p>id = div-1c</p> 
18        </div> 
19   </div>
20  </div>  
21     <div id="div-after"> 
22              <p>id = div-after</p>
23   </div> 
24 </div> 

CSS Code

Simple use of a style:

1 #example { float: right; }  
2 #example p { margin: 0 0.25em; padding: 0.25em 0; } 
3 #div-before, #div-after {  color: #000; }  
4 #div-1 { width: 400px; background-color: #000; color: #fff; }  #div-1-padding { padding: 10px; }  
5 #div-1a {  color: #fff; }  
6 #div-1b { background-color: #3d3; color: #fff; }  
7 #div-1c {  color: #fff; } 

Preliminary results:

 

In order to better understand the relevant knowledge points in the future, we will show the DOM in this example:

 

In the DOM diagram above, I think it is very easy for everyone to understand. Here we will mainly look at the use of position.

Step 1: position: static

The default value of the "position" attribute of all elements in CSS is"Static", Because you do not need to explicitly set"Position: static". At this point, you will ask, is this attribute value meaningless? Actually, it is not. It will also play a major role in CSS. Let's look at an example:

For example, your two pages, there are "div # div-1" at the same time, then you need to "div # div-1" absolute positioning in area; and in B page "div # div-1" does not need to be absolute positioning.

A page in the "div # div-1" absolute positioning:

#div-1 { position: absolute; } 

At this point in B page does not want to be absolutely positioned, then we must explicitly reset the postion attribute of # div-1 in your style to "static"

body.B #div-1 { position: static; } 

Step 2: relative positioning position: relative

RelativeIt is called relative positioning. If you specifyPostionThe value is"RelativeThen you can set the positioning value of the element through the T-R-B-L (that is, top, right, bottom, left.

Note the following when using relative:

The first and third points of the above three points are better understood, so now for the second point, let's look at the operation of an instance:

On the basis of above, we move 20 PX down the "div-1"; move 40px to the left:

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

Let's take a look at the effect:

 

The second point mentioned above can be confirmed again. The element "div-1" moved 20 PX down, shifted 40 Px to the left, its position changed, and the original physical space occupied by the element still exists, another element, after relative positioning, does not affect other adjacent elements.

Step 3: absolute position: absolute

AbsoluteIs the third property value in position. If you specifyAbsolute, The entire element will drift out of the document stream, and the physical space of the element also disappears. Unlike"RelativeIt also has the original physical space.

Let's look at an example of absolute positioning on div-1a elements:

#div-1a { position:absolute; top:0; right:0; width:200px; } 

 

At this time, the element "div-1a" is not in the original document stream, and its location is relative to the body to locate, So we sometimes do not need this effect, what if our element div-1a still want to absolute positioning in the div-1, what should we do? In this case, we need to play the role of "relative" in the previous step.

Step 4: Combine relative and absolute

In step 2, we know that the relative positioning of the element "relative" is relative to the positioning of the element itself, while in step 3, we know that the absolute positioning of the element "absolute" is relative to the body. However, this statement is normal only when such conditions are met:"If no "relative" setting is performed for any ancestor element of the absolute positioning element, the reference object of the absolute positioning element is the body.In this way, the combination of "relative" and "absolute" can play a great role.

Let's take a look at the following:

 

As an example to illustrate the relationship between "relative" and "absolute". First, there are three divs in the body, and the relationship between the three divs is "div-1> div-2> div-3", and there is such an absolute positioning in the div-3:

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

The following describes the meaning in several cases:

1. div-1 and div-2 are not set "position: relative"At this time, our div-3 absolute position after drifting to the "div-3c" position;

2. Now we add a position: relative in the div-2 Element"At this time, our div-3 absolute position after drifting to the "div-3a" position;

3, next to the relative positioning settings to the div-1 element,At this point, the div-3 is absolutely positioned to the position of the div-3b.

With so much thought, I just want to explain one thing:If an element is absolutely positioned, whether the relative positioning is set for the element closest to itself. If any, the element closest to itself is located, if the relative positioning element is not found for its ancestor element, the body is always found.This sentence seems a bit confusing. Do you know what I'm talking about? If you do not understand, you can refer to or the following example:

Back to the instance above, if we add a "relative" in the "div-1 ":

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

Now we are relatively not in the third step of the body, but "div-1", we look at the changes with the third step:

 

Step 5: implement the layout of relative and absolute

In this step, you only need to demonstrate the two la s implemented by relative positioning and absolute positioning. On the basis of the above, the relative positioning of the div-1, and the absolute positioning of the div-1a and div-1b, so as to achieve the effect of the layout of the two columns:

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

 

This is only used to illustrate the role of absolute. If you can only achieve the above effect, it may not be perfect in actual production. In order to make it more perfect, on this basis, let's take a look at the following step.

Step 6: set a fixed height

To make the layout more appropriate, you can set a fixed height on the div-1 element, such:

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

 

In contrast, it is better, but we do not know the height of the element content. Therefore, setting a fixed height here is also a dead point in our practice. We do not recommend this. If we want to do so, we can use other methods.

Step 7: float

In the first two steps, absolute positioning is not ideal, so we can consider using float to solve the problem. We can use float on an element to align the element to the left or right, and use text around the element (this function is particularly useful in text around the image ). The following is a simulation:

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

 

Step 8: Multi-column floating

The above shows a floating column. Next let's take a look at the changes in multiple columns:

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

 

Compared with absolute positioning, floating now solves the issue of high self-adaptability, but there is also a problem. Floating also destroys the original file stream of the element, causing the parent element to collapse, to solve this problem, we need to clear the floating.

Step 9: Clear floating

To make the parent element of the floating element not in the collapsed State, we need to clear the floating element:

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

 

Float is a deep topic in css, but it is just a simple introduction here. I also introduced some related knowledge about Float in "Float of CSS" and "float II of CSS". You can also read "Clear Float".

Step 10: Extended reading

The above just briefly introduces the basic knowledge of position in CSS. If you are interested in this knowledge, click the following link:

I hope this brief introduction will be helpful to you. If you have better suggestions or share them, you can leave a message directly in the following comments. Source: W3CPLUS

 

 

Others

The default position attribute values of any element are static, but relative and absolute are often used in layout.

Before introducing the two attributes, we must remember an important conclusion: If we use position for layout, the position attribute of the parent element must be relative, it is best to use absolute for an element located at a certain position in the parent level, because it is not affected by the attributes of the parent level element padding. Of course, relative can also be used, however, do not forget the padding value when calculating it.

[Absolute: absolute positioning]
By default, it is positioned in the upper LEFT corner of the browser with TOP, RIGHT, BOTTOM, and LEFT (TRBL). It has the following attributes:
(1) If there is no TRBL, refer to the upper left corner of the parent level; if there is no parent level, refer to the upper left corner of the browser; if there is no parent level element, but there is text, refer to the source in the upper right corner of the last text but keep opening the text to overwrite it with the top.
(2) If TRBL is set and the parent level does not have the position attribute (whether it is absolute or relative), it is located at the top left corner of the browser by default. The location is determined by TRBL.
(3) If TRBL is set and the parent level has the position attribute (whether it is absolute or relative), the position is located at the origin in the upper left corner of the parent level by default. The position is determined by TRBL.
The above three points can be summarized as follows: if you want to use absolute for positioning, we need to clarify two points:
1. Set TRBL

Second, set the position attribute for the parent level.

[Relative: relative positioning]
By default, the original vertices of the parent level are the original vertices. If there is no parent level, the original vertices are located at the bottom of the last element in the text, and TRBL is used for locating. When the parent level has the padding attribute, refer to the original points in the parent content area for locating.
(1) If TRBL does not exist, refer to the upper left corner of the parent level; if there is no parent level, refer to the upper left corner of the browser; if there is no abdominal muscle element, but there is text, the text is located at the bottom of the text and the text is disconnected.
(2) TRBL is set, and the position attribute is not set for the parent level. The position is located at the origin in the upper left corner of the parent level.
(3) set TRBL, and set the position attribute for the parent level. The position is located at the origin in the upper left corner of the parent level. However, if the parent level has the padding attribute, in this case, the origin is located at the upper left corner of the content area.

To sum up, relative locates in the upper left corner of the parent level, but is affected by padding.

In this way, we can see why relative is used to locate the parent element, and absolute locates the internal element. Because after relative is used for layout, we can not only use float to layout the page, but also use TRBL for layout. However, if you use absolute to deploy the page, the Search DIV is positioned relative to the upper left corner of the browser. This greatly reduces the adaptability and reduces the user experience. Therefore, it can only be used to position an element inside the element whose attribute is absolute.