Absolut non-absolute positioning and absolut Positioning

Absolut non-absolute positioning and absolut Positioning
I. Popular usage of absolute positioning

In general, what will we do with absolute positioning? It is the absolute positioning, thinking, and deciding to die in a certain position. For example, the lightbox effect is the absolute positioning used. For example, if the pop-up message of Sina Weibo is displayed, the result will pop up when I want to forward the microblog of Li Bingbing's sister:

In addition, it is used together with the parent relative positioning label to achieve absolute positioning effect relative to the parent label, such as Renren's search drop-down menu effect:

Here, we need to use the left (right) absolute position value or the top (bottom) value. OtherwiseThe absolute position will be the same as the left value 0 and top value 0.. Okay. I want to bold it in italics here. Why? This sentence is incorrect. If you are not aware of it, you need to take a good look at this article.

Well, maybe this is not the case for others, but my understanding of position: absolute can be said to be inadequate for a long time, or I have never had a chance to calm down and study it, if you know about it, you will get some wrong ideas. One of them is as mentioned above. If left is not set for the position element of absolute, is the top equivalent the same as left: 0; top: 0? Actually different.

Ii. Positioning of the absolute element margin

The positioning of absolute in margin seems to be an enemy. In some definition, both of them have the same role and can be located. It seems that both are difficult to find and competitors. Indeed, in most cases, however, the absolute element that does not set the positioning value can be located using margin. For a small example, see the following code, an absolute positioning image, including the margin attribute, no left, top, and other fixed values:
There is no conflict between absolute positioning and margin positioning. No matter the left/top value is set for the absolute element, its margin attribute value can work. The following shows the margin positioning of the absolute element without left/top values.

 the premise is that no positioning value such as left or top is set.I understand this. For absolute positioning elements that do not set absolute positioning values, they are not separated from the document stream and are still in the demo (which may be incorrect)(Correct now: this understanding is incorrect and has been removed from the Document Stream). The evidence is as follows: in another common div (no style) place an absolute element without an absolute positioning value. This element is still child in this div, instead of running out of the div, for example, the following sample code:
<div>.zxx_show{padding:20px; background:#f0f3f9; color:#aaaaaa; font-size:14px;}.zxx_text{position:absolute; margin:-1px 0 0 -1px; color:#333333;}
HTML code:
<Div class = "zxx_show"> <span class = "zxx_text"> This is a piece of text used for testing. Check whether the projection effect exists ~~ </Span> This is a piece of text used for testing. Check whether the projection effect exists ~~ </Div>
Click here: Text projection effect demo
The absolute positioning element must be written before the projection text. Because the actual height and width occupied by the absolute element are both 0, the text can be naturally displayed below it. Because the text below is light-colored, the projection effect is formed. This method is exquisite. Unfortunately, there is a small difference in compatibility. in IE6, the projection direction is horizontal to right, and IE7 is in the upper right direction. hack is required.
Adaptive Layout
The absolute element without a positioning value is a more abnormal float element, so some tasks that the floating element does can also be done by the absolute element, such as adaptive layout. For example, this method is used for facebook's dynamic Avatar and content description.
Because the width of the Avatar is fixed, we can use margin or padding to open a distance for the description label, and use absolute without a positioning value to locate the Avatar, in this way, the adaptive layout of the Avatar and description is achieved.
For example, in my blog Personal Information Section, the float Adaptive Layout is used now. In fact, the float attribute is replaced with absolute, and the effect is the same. See:
I also made a demo about the adaptive application of absolute. You can click here: absolute Adaptive Layout demo
For demo effect:
The non-absolute Positioning Application of absolute definitely has other features, as long as you remember that the absolute element without a positioning value is a float floating element that even has no actual width, you can use this feature, use your creativity to achieve more and more exciting results.
Iv. Summary
Finally, let's answer the question that starts to appear. If left is not set for the position absolute element, why is the effect of top equivalence different from left: 0; top: 0? I believe you should know the answer. For example, a div has an absolute attribute element, which has no left or top value, it will stay in this div quietly like a normal inline-block attribute element, but once left: 0; top: 0; sorry, this absolute element is changed immediately, directly disconnects from the DOM tree and is independent from the document stream. The result is located relative to the ancestor tag of the closest relative attribute (if not, the body is located ). Since we usually use absolute without values such as left and top, we will be confused.
Every CSS attribute has a story. We need to calm down and discover and understand it.
Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 608
(This article is complete)