{Transition} Understand position: relative and position: absolute

 

Reprinted: <a href = "http://www.happyshow.org/article/125.html" target = "_ blank"> Position has three values: static (static), relative (relative), and absolute (absolute). Because static is the default value of all page elements, therefore, this value is hardly required when you set the element positioning type unless it is used to overwrite the previous definition. For the latter two, it is generally used to place an absolute positioning element in a relative positioning element, Child Element B can be precisely located through top, right, bottom, and left. The target of positioning is parent element A with relative positioning attributes. After these offsets are set, the resulting gaps are filled by the following elements (if the following elements are of sufficient size ). Element B has the absolute positioning attribute, which is equivalent to extracting from the document stream and floating in the original layout to form a "layer". If there are multiple "layers ", there must be who will cover and who will compete with each other. To solve this competition, the z-index (z-axis of the spatial Coordinate System) attribute will be generated, if the value is big, then everyone will be there. In addition, if element A of the parent level does not set relative, Element B uses the body tag as the reference point. For element A with the position: relative attribute, its top, right, bottom, and left offsets take the original position of the element as the reference point, rather than as mentioned above, take the parent element or body with the relative positioning attribute as the reference point. A gap is generated after an offset is set, and the elements around the gap are not filled, even if they are adequate (for demonstration ). It is worth noting that, at this time, the margin and margin of element A will act on the original position of the element, because the original position produces an offset, the final position of the element will be the position after the combination of margin and top, right, bottom and left, and the position of the surrounding elements will also be affected. Let's look at the absolute in relative, such as the and B elements above. If both elements have top, right, bottom, and left, for Element B, the reference point of its location offset is the position after the offset of Element A, not the original position of Element A. Similarly, if Element B has margin, its reference point is also the position after the offset of Element, this is very important. This is the concept of absolute (demonstration ).

 

How can we distinguish absolute from relative? How can we 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 are their features and effects? What kind of skills are there between the two? Absolute: position: absolute In CSS. It indicates Absolute positioning. Refer to the top left corner of the browser and use TOP, RIGHT, BOTTOM, and LEFT (TRBL) for positioning, if no TRBL is set, the original point of the parent level is the origin point 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;It means absolute relative positioning. It refers to the original point of the parent level as the original point. If there is no parent level, the original point of the BODY is used as the original point for positioning with TRBL, 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. 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.