CSS _ element Positioning

The core of web page layout is positioning. In CSS, we use the position attribute as the element to locate the element. After applying this attribute to the element, we can change its position in the regular document stream!

The position attribute has four values:

Static

Relative

Fixed

 

The following is the template HTML code.

<! DOCTYPE html> 

 
If no style is added, the static positioning method is used by default. The following figure shows the effect.
 
 
Use relative positioning relative
Now we want to use the relative positioning method for the second sentence "Jia shengcai is more incoherent". The relative positioning here refers to the static position relative to the original position.
Add the following style:
 
 
This Code sets the p border to 1 px with a width of PX and removes the padding and padding.
The displayed result is as follows:
Now let's move the second segment to the right at the position of 200px.
 
 
Running Effect
It can be seen that its location is changing from the original location. It just moved a bit, and its original null position is still there. Other elements have not changed !!
Use absolute positioning absolute
 
 
Change the position attribute value to absolute to change the positioning method to absolute positioning. Absolute positioning: it refers to positioning the body, which is also the default positioning context.
Running Effect
It can be seen that after the absolute positioning method is adopted, the original position of the element is occupied by the elements below it.
 
 
Fixed Position fixed
Fixed positioning is similar to absolute positioning. The absolute positioning element is the context, while the fixed positioning element is the browser window, so it will not move with the page rolling.