Explanation of Position attribute absolute and relative

I have been studying JavaScript scripts recently. I am familiar with the positioning attributes of CSS styles in Dom. I didn't know much about this attribute before. I found two articles on the Internet. Article I feel very thorough about it, and I am afraid I will forget it.

1. Interpretation of absolute and relative http://www.blueidea.com/tech/web/2006/4249.asp

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. It indicates absolute relative positioning. It refers to the original point of the parent level as the original point, and the original point of the body is the original point without a parent level, trbl is used for positioning. When the parent class has CSS attributes such as padding, the original points of the current level are located according to the original points 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.

Application http://blog.sina.com.cn/u/4bcf4a5e010008o0 of positioning and positioning

CSS absolute Positioning Relative positioning

Positioning has always been a difficult point in Web standard applications. If you cannot clearly identify it, the effects that should be achieved may not be achieved, and the effects may be different. If the positioning principle is clarified, the positioning will make the web page more perfect. Definition of positioning: The positioning content in CSS is: Position: relative | absolute | static | fixed Static) There are no special settings. The basic positioning rules are followed, and hierarchical classification cannot be performed through Z-index. Relative) Objects cannot be stacked and are not separated from the document stream. The objects are located by top, bottom, left, and right based on their static locations, and can be graded by Z-index. Absolute (absolute positioning) Remove the Document Stream and locate it through top, bottom, left, right. Select the most recent parent-level object with the positioning settings for absolute positioning. If the parent-level object does not set the positioning attribute, the absolute element will be located at the origin of the body coordinate, you can perform hierarchical classification using Z-index. Fixed (fixed positioning) The fixed reference object Visual Window It is not a body or a parent element. You can perform hierarchical classification using Z-index. Note : Cascade levels positioned in CSS: Z-index: auto | namber; AutoFollow the positioning of its parent object NamberAn integer with no unit. NegativePositioning principle: 1. elements that can be displaced (relative positioning) In the stream of this article, any element is limited by the position of the text stream, but through CSS we still make these elements can change their position, we can use float to float the elements, or use margin to move the positions of the elements. But in fact it is not a real shift, because it is only a blind eye that is achieved by increasing the value of margin. In the true sense, the displacement is achieved through top, right, bottom, left (hereinafter referred to as trbl, trbl can be used in different folds .) Generated for a relatively located element. Let's look at the figure below: The figure shows a relatively positioned element. # First { Width: 200px; Height: 50px; Margin: 25px; Border: 25px solid #333; Padding: 25px; Position: relative; Top: 50px; Left: 50px; } The lower part is a default Black Block. # Second { Width: 400px; Height: 75px; Margin: 0; Border: 0; Padding: 0; Backgroud-color: #333; } We can see that this part of the block in the text stream is blocked by the relative positioning above. This shows: "When the element is set to relative positioning or absolute positioning, it will automatically generate a stack, their cascade level is naturally higher than the text stream ". Unless its Z-index value is set to a negative value. In addition, we found that when the relative positioning element is displaced, the content of the expression is already out of the text stream, in this article, the original total width and total height (the content height or width plus the value of margin \ border \ padding) are also left for the original relative positioning ). This indicates that in relative positioning, although the presentation area is out of the original text stream, there is also an old location in the text stream. This should be noted, because in actual application, if the relative displacement value is too large, the original area will form a blank area. In addition, we note that the coordinate point of the positioning element is at the upper left edge of the margin value, that is, point B in the figure. Then all the displacement calculations will be based on this point for element pushing. 2. elements that can be located at any position (absolute positioning) As mentioned above: relative positioning can only move up and down in the text stream, but it also has some limitations. Although its presentation area is out of the text stream, however, he still reserves a place in the text stream. This is like a working person who has gone to another place, but he still has a dedicated position in his hometown, this position does not change as it moves. However, this clearly leaves a blank space. If you want the text stream to discard this part, you need to use absolute positioning. Absolute positioning not only disconnects from the text stream, but also does not leave exclusive spaces for this absolute positioning element in the text stream. This is like a job in a factory. If a worker leaves, it will naturally ask another worker to fill the position. The moving part naturally becomes a free body. Absolute positioning will allow you to set elements through trbl so that they are in any position. When the position attribute of the parent layer is the default value, the coordinate origin of trbl starts with the coordinate origin of the body. See: We can see that the content in the text stream is definitely positioned as a non-prime position, and it is not polite at all. The absolute positioning elements are naturally stacked on the text stream. In a single absolute positioning, the positioning element will go to the upper-left corner of the page, because it is the coordinate origin after their absolute positioning. 3. Absolute positioning of Association The above is a single absolute positioning, and we often need a special form in practical applications. That is to say, the positioning element must have the absolute positioning feature, but the absolute positioning coordinate origin can be fixed at a certain point on the webpage, when this point is moved, the absolute bitwise element can ensure the relative position relative to the original coordinate. That is to say, this absolute positioning is required to move along with the webpage, and it is determined by a fixed position on the webpage. This effect is particularly important when the webpage is centered. The basic way to achieve this effect is to set relative or absolute positioning for the parent level of the absolute positioning. Then, the absolute positioning coordinates start with the parent level. Even so, the coordinate origin is not the coordinate origin of the parent level, which is a very strange coordinate position. Let's take a look at the model diagram: We can see that in this figure, the parent level is a black-gray block, and the child level is a blue block. Parent level is relative positioning, and child level is absolute positioning. The sub-level is set to 50 pixels at the top and 50 pixels at the left tilt. Then, we can see that the sub-level coordinate origin does not shift 50 pixels from the parent-level coordinate origin, but is from the top left edge of the parent-level block padding as the coordinate origin (that is, a point ). The parent level does not affect the location relationship between the absolute positioning element and the parent level relative positioning element if location movement or browser window size changes. This sublevel does not need to be adjusted. This is a very special and practical application method. If you are not comfortable with positioning, I believe that after reading the explanations here, you will certainly be able to use positioning as you like. 4. Elements in sight (fixed positioning) Position: fixedIt means fixed positioning. This fixed position is very similar to absolute positioning. The only difference is that absolute positioning is fixed in a certain position on the webpage, while fixed positioning is fixed in the browser's frame position.