After the three positioning relative, absolute and fixed in HTML, the percentage width and position of the box are easy to make mistakes.

1. Relative positioning: As the name suggests, relative positioning is offset relative to its own position, as shown below:

         

Taking the center of the box as the benchmark, The positive direction of the edge, for example:

Move 20px to the right: The code is left:20px; or right:-20px;

Move down 20px: The code is top:20px; or bottom :-20px;

　　　　　　

2. Absolute positioning: absolute

Based on the first positioned ancestor box, The center direction of the positioning ancestor level is positive, as shown below:

　　

3. Fixed positioning fixed is independent of the body tag and is only based on the web page html. Its positioning method is similar to absolute positioning. The center direction is the positive direction.

The width percentage is also based only on html.

Note: 1. If there is no parent positioning, absolute positioning will default to the first positioned ancestor.

　2. The width percentage of absolutely positioned and relatively positioned boxes is based on the first positioned ancestor. Baseline; the default is based on body

For more information on the three positioning relative, absolute, and fixed in HTML, the percentage width and position of the box are prone to errors. For related articles, please pay attention to the PHP Chinese website!