Position in CSS

Relative and absolute of position in CSS

The default attribute values are static and static. You don't have to talk about it. The most important thing is
Relative (relative) and absolute (absolute ).
If we copy other people's code, we will combine the absolute attribute with left and top to create the "floating layer" effect. However, sometimes we need to focus on the floating effect of a container, rather than the window. At this time, the calculation of height and width is not only troublesome, but also almost impossible to achieve the perfect effect. I couldn't do anything at the beginning. Later I found that I only needed to set the position of the style attribute at the upper level to relative.

That is to say, the effect of the position attribute value is directly affected by the position attribute value in the container style.
For example, the nested structure of the following A-B

<Div id = "A">
<Div id = "B">
</Div>
</Div>

When the position of a is relative, the position of B is absolute. At this time, left: 0 and top: 0 are no longer for the window document, but for the DIV with ID.

In this way, when developing some B/S-based applications, you can easily add some UI elements, such as the close button of an activity layer.

From: http://www.sostips.com/blog/index.php? Load = read & id = 36

Differentiate position positioning attributes in CSS: absolute and relative

Many friends have asked me how to distinguish absolute from relative and how to 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 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.AbsoluteRelativePositioning: 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 of the body as the original vertices and works with trbl for locating. When the parent level has CSS attributes such as padding, the original vertex of the current level is located by referring 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.

From: http://www.77zy.com/article/article_225_1.html