Non-absolute location usage of Absolut absolute positioning

First, the popular usage of absolute absolute positioning

Generally speaking, what do we do with absolute absolute positioning? is absolute positioning, as implies meaning, dead in a certain position. For example, the Lightbox effect is the use of absolute positioning, such as Sina Weibo pop-up tip information, I want to forward Li Bingbing's sister's microblog, the results will pop up:

There is also the use of the parent relative relative positioning tags to achieve the absolute positioning effect relative to the parent tag, such as the web Search drop-down menu effect:

Here is the use of the left (right) absolute positioning value or top (bottom) value, otherwise the absolute positioning of the position will be the same as set to 0,top for the same value as 0 . Well, I'm deliberately bold here, why? Because this sentence is not correct, if you do not realize, it is necessary for you to take a good look at this article.

Well, maybe others are not so, but my understanding of position:absolute, can say for a long time is not in place, or have never had the opportunity to calm down to study, know a probably, so there will be some wrong understanding. One of them is the above mentioned, position for the absolute element if not set left, top equivalence and left:0;top:0, the effect of the same? actually not the same.

Second, the margin of the absolute element

Absolute positioning in the margin seems to be the enemy, some definition, the role of the two are consistent, can be positioned, it seems that the two are incompatible, competitors, indeed, most of the case is, but not set the positioning value of the absolute element can be positioned through the margin. For a small example, see the code below, an absolutely positioned image with a margin attribute, no left,top value:
Absolute positioning and margin positioning in fact there is no conflict, regardless of the absolute element when the Left/top value is set, its Margin property value can work. The following shows the margin positioning of the absolute element without a left/top value.

Results such as:

You can really click here: the small example Demo

Visible absolute elements can be positioned by margin. The premise is that no positioning values such as left or top are set. as I understand it, the absolute absolute positioning element, which does not have an absolute positioning value, is not out of the document stream, still in the demo (may not be correct)(now corrected: This understanding is wrong, is out of the document flow), The evidence is as follows: We then place an absolute element with no absolute positioning value in a normal div (no style), and this element is still in the Div, not the Div, as in the example code below:

<div style= "width:200px; height:120px; Background: #f0f3f9; margin:40px; " > </div>

Results such as:

You can simply click here: the sample Demo

It can be said that the absolute element without setting the positioning value is an ordinary and not ordinary element, the common point is that it is still in the DOM tree, the margin is sensitive to attributes, not ordinary in its actual aspect are lost. This is very similar to floating (float), the nature of the float is "wrap and destroy", the height of the damage, the actual occupy height of the floating element is 0 (specific point here), and the absolute element (no positioning value) is also "parcel and destruction", but its "destruction" than float more ferocious, Not only the actual height is not, even the actual width is not. A less rigorous conclusion: the absolute positioning element is a more perverted relative than the floating element.

The non-absolute positioning of absolute positioning elements

From the above section we can get two conclusions: first, the absolute element with no positioning value can use margin positioning, and second, the absolute element with no anchored value is a floating element with no actual width.

These two points are important, and we can use these two features to achieve some special positioning effects. Two examples, one is the text projection effect, the second is the self-adaptive layout.

Shadow Effect of text
CSS3 in the Text-shadow attribute can achieve text shadow effect, but IE to CSS3 support is not good, so we need to think for his method implementation, Absolute+margin is a very simple method, see below, cut from Firefox3.5:

The relevant code is as follows:

CSS Code:

. 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 text to test to see if there is a projection effect    ~~</span> This is a test text to see if there is a projection effect ~~</div>

You can really click here: Text Projection effect Demo

Absolute positioning elements need to be written before the projected text, because the absolute element actually occupies the height of the width is 0, so the text can be automatically displayed below it, because the text below the color is lighter, so it will form a projection effect. This method is very delicate, unfortunately there are small compatibility differences, IE6 under the projection direction is horizontal to the right, IE7 is the right upper direction, need to hack repair.

Self-adapting layouts
The absolute element with no positional value is a more perverted float element, so some things that float elements do absolute elements can do, such as adaptive layouts. For example, Facebook dynamic avatar and content description is the method used.

Because the width of the avatar is fixed, so for the description tag, we can use margin or padding to open a distance, avatar using the absolute positioning without positioning value, so that the avatar and description of the adaptive layout effect.

For example, my blog personal information about, now is the use of the Float adaptive layout, in fact, the float property is replaced with absolute, the same effect, see:

About Absolute's adaptive application, I also made a demo, you can click here: Absolute Adaptive Layout Demo

For demo effect:

Absolute absolute positioning of non-absolute positioning applications there must be other, as long as you remember that the absolute element with no positioning value is a float floating element that is not even the actual width, then use this feature, play your creativity, to achieve more exciting results.

Iv. The final summary

Finally, the first answer to the question of the beginning of the suspended position: position for the absolute element if not set left, top equivalence and left:0;top:0, the effect is not the same? I believe you should know the answer, for example, a DIV has a absolute attribute element, which does not have a left or top value, it will be like a normal inline-block attribute element silently in the DIV, but once set the left:0;top:0; This absolute element immediately becomes detached from the DOM tree, independent of the document flow, with the result relative to the nearest relative attribute's ancestor tag location (if not, the body is positioned). As we usually use absolute are inseparable from the value of left,top, so the concept is unclear.

Each CSS property has a story, we need to calm down to discover, experience.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=608

(End of this article)

Non-absolute location usage of Absolut absolute positioning