Interpretation of absolute and relative_Experience exchange

Author Xiaoyi's blog: http://andymao.com/

Many friends have asked me how to distinguish absolute from relative and how to use them? We all know that absolute is absolute positioning and relative is relative positioning, but what do absolute and relative mean? What is the absolute, and relative is relative to what? So what characteristics do they have and what effects can they produce? What kind of skills are there between the two? Let’s explain them one by one below.

Absolute, the writing method in CSS is: position:absolute; It means absolute positioning. It refers to the upper left corner of the browser and cooperates with TOP, RIGHT, BOTTOM, and LEFT (hereinafter referred to as TRBL) for positioning. If there is no setting Set TRBL, which defaults to the origin point of the parent. If TRBL is set and the parent does not set the position attribute, then the current absolute will be positioned with the upper left corner of the browser as the original point, and the position will be determined by TRBL.

Generally speaking, if you use Absolute to center the web page, it is easy to make mistakes, because the web page has always automatically adapted to the size of the resolution, and Absolute will use the upper left corner of the browser as the original point, not the resolution. changes position due to changes. This is where many people go wrong. The characteristics of the webpage on the left are very similar to Relative, but there are still essential differences.

Relative, the writing method in CSS is: position:relative; It means absolute relative positioning, it refers to the original point of the parent as the original point, without a parent Then the original point of BODY is used as the original point, and TRBL is used for positioning. When there are CSS attributes such as padding in the parent, the original point of the current level is positioned with reference to the original point of the parent content area.

Sometimes we also need to rely on z-index to set the upper and lower relationship of the container. The larger the value, the higher it is at the top. The range of values ​​is natural numbers. Of course, one thing to note is that the parent-child relationship cannot be set up and down using z-index. The child must be on top and the parent must be on the bottom.