Absolute and relative We all know that absolute is absolute positioning, while relative is relative positioning. But what does it 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. Absolute: Position: absolute; it indicates absolute positioning. It refers to the top left corner of the browser and works with top, right, bottom, and left (trbl) positioning. If trbl is not set, the original vertices are marked as the original vertices Based on the parent level by default. 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.RelativePositioning: it refers to the original vertices of the parent level as the original vertices. If there is no parent level, it refers to the original vertices at the bottom of the last element in the order of text streams, and uses trbl for positioning, when the parent class has CSS attributes such as padding, the original vertex of the current level is located according to the original vertex 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. However, the Z-index is not omnipotent, And the Z-index is also restricted by the level. For details about the level restrictions, see (Note: This part is invalid, sorry ). |