CSS-detailed explanation of position (1)

Position

How to locate the retrieved object.

Valid value:

1. Static

Default Value. No special location. html positioning rules are followed.

Note: When position is static, defining top, left, bottom, and right does not work.

2. Absolute

Drag an object out of the Document Stream and no longer occupy the normal position of the element in the document.

Use the top, left, bottom, right and other attributes to perform absolute positioning on the parent object with the positioning settings closest to the parent object.

Note: A. Relative to the closest parent object; B. There is a parent object for positioning settings.

3. Relative:

Objects cannot be stacked, and elements occupy their original positions.

Normal offset is performed based on top, left, bottom, and right in the Document Stream.

Note: relative offset. The relative here is the relative object itself.

For example, if the original object is located at (100,100), the offset is calculated based on (100,100.

Below, useCodeTo describe:

By default, nothing is used. In this case, the default value is static.

Code:

  http://www.w3.org/1999/xhtml ">     
 
   
   

    
     main "> 
    
    
 
    
    

      sub1 "> 
    
 
    
    
 
    
    

      sub2 "> 
    
 
    
    
  
    
    
  
   
   

Effect:

Now let's look at relative. We only set sub1.

Code:

 
# Sub1 {background-color: Silver; position: relative; top: 200px; left: 200px ;}
 

Effect:

Note:

1. Mark the original position of sub1 in the system. We can see that sub1 still occupies the original position, but it is only offset in the visual effect.

2. Here, the top and left positions of sub1 are offset (200,200) from the original position, while the position of sub2 is not changed.

3. Relative is offset relative to the position of the element itself.

Next, let's take a look at the settings of position as absolute.

When the position of an element is set to absolute, is the element offset relative to the browser window (0, 0?

The answer is: no. There are two cases.

1. when the position attribute is set for the parent object of an element (including the parent object of the parent object) and the attribute is absolute or relative, that is, if it is not the default static object, in this case, the element is located according to the parent element.

Code:

# Main {border: solid 1px silver; width: 300px; Height: 300px; position: absolute; top: 100px; left: 100px ;}# sub1 {background-color: Silver; position: absolute; top: 100px; left: 100px ;}
 

Effect:

2. If the element does not have a parent element with the position attribute, the element is positioned as the body.

Code:

 
# Sub1 {background-color: Silver; position: absolute; top: 100px; left: 100px ;}
 

Effect:

Note:

1. sub2 overwrites the original location of sub1

2. The margin attribute of the body is 10px.

Finally, let's take a look at the setting of position as fixed.

Fixed is a special absolute, that is, fixed always uses the body as the positioning object.

Code:

Modify the Code 1 of absolute:

 
# Sub1 {background-color: Silver; position:Fixed; Top: 50px; left: 50px ;}
 

Effect:

Note:

1. The position of main is (100,100) relative to the body)

2. The position of sub1 is (50, 50) relative to the body)

3. The sub2 position is (100,100) relative to the body)