Understand absolute and relative_CSS/HTML in CSS

Many friends have asked me how to distinguish absolute from relative and how to use them? We all know that absolute means absolute positioning and relative means relative positioning, but what do absolute and relative mean? Where is the absolute, and 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; TOP, RIGHT, BOTTOM, LEFT (hereinafter referred to as TRBL) for positioning. If TRBL is not set, the default is based on the original 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. If there is no parent, the original point of BODY is used as the original point, in conjunction with TRBL 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 value range is a natural number. 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.