Recently many netizens asked me how to distinguish absolute positioning and relative positioning, how to use? Where is the absolute, and relative to what? So what kind of characteristics do they have and what kind of effects can they make? What’s the trick between the two? The following little ape circle web front end lecturer to one interpretation.
Absolute, the CSS is written as: position: Absolute; He means absolute positioning, he refers to the TOP LEFT corner of the browser, with TOP, RIGHT, BOTTOM, LEFT(hereinafter referred to as TRBL) for positioning, in the absence of TRBL, default according to the parent marking original point as the original point. If TRBL is set and the parent does not have position, then absolute is currently positioned at the top left corner of the browser. The position is determined by TRBL.
In general, using Absolute when a web page is centered is a mistake because the web page automatically ADAPTS to the resolution. Absolute uses the upper left corner of the browser as its starting point and does not change position for resolution. That’s where a lot of people go wrong. And the page on the left is very similar to Relative, but there are essential differences.
Relative, CSS is written as: position: Relative; ? It refers to relative positioning, which refers to the original point of the parent level. If there is no parent level, the bottom of the last element is the original point according to the sequence of text flow, and TRBL is used for positioning. When the parent level has CSS properties such as padding, the original point of the current level is positioned according to the original point of the content area of the parent level.
Sometimes we also need to rely on z-index to set the relationship between the top and bottom of the container. The higher the value is, the higher the value is. The range of values is natural. However, z-index is not a panacea. Z-index is also limited by levels.
The above is the little ape circle web front end lecturer for div+ CSS absolute positioning and relative positioning introduction, I believe you have a certain understanding, so hurry up to do it, remember that learning is a need to adhere to the web front end self-study ② group: 738735873, if you encounter problems can go to the little ape circle to find the answer, there are the latest and most comprehensive courses.