Understanding absolute and relative in CSS

Many friends have asked me how to distinguish absolute from relative and how to use it? We all know that absolute is absolute positioning, while relative is relative positioning. But what does this mean by absolute and relative positioning? What is absolute, relative to what is relative? What kind of features can they achieve? What kind of skills are there between the two? Next we will explain them one by one.

The statements in absolute and CSS are as follows: Position: absolute; top, right, bottom, and left (trbl) for locating. If trbl is not set, by default, the original vertices are marked as the original vertices Based on the parent level. If trbl is set and the position attribute is not set at the parent level, the current absolute is located at the original point in the upper left corner of the browser. The location is determined by trbl.

In general, when the webpage is centered, absolute is prone to errors, because the webpage always adapts automatically with the resolution, while absolute uses the browser's upper left corner as the original point, the location will not change due to resolution changes. Many people make mistakes in this case. The characteristics of a webpage are similar to those of relative, but there are some essential differences.

Relative: Position: Relative In css. It indicates absolute relative positioning. It refers to the original point of the parent level as the original point, and the original point of the body is the original point without a parent level, trbl is used for positioning. When the parent class has CSS attributes such as padding, the original points of the current level are located according to the original points of the parent level content area.

Sometimes we also need to rely on Z-index to set the upper and lower relations of the container. The larger the value, the higher the upper the corner. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set with Z-index. The parent-child relationship must be set at the parent level.