Author: cutsin
Original address: http://www.moonless.net/blog/2007/09/csspositionz-index.html
Note: This article is only for the exchange of use, if there are improper places to welcome criticism, but please specify the details by, thank you!
Because usually not very used, so the past to write CSS for the position properties of the absolute, relative value of the understanding of the fuzzy, for Z-index Cascade is not touch the mind, in addition to understanding the factors, the different browser results are also a big problem. Today, read the CSS document, finally, the box model of the floating, positioning has a more profound understanding.
We are likely to encounter this problem in practice:
1, do a horizontal navigation, and then the mouse after the Drop-down menu, then the Drop-down menu position control is a key;
2, we want to put in a normal page layout in a few floating on the page bubble hint, at this time neither do not want to let bubbles hint damage normal document layout, and do not want bubble hint positioning in different browsers everywhere wandering.
3. When we insert a small icon in a normal text, we usually use the tag, while its vertical center problem is confusing, whether you use HTML attributes Absmiddle, or use CSS properties vertical-align, or using the parent object's Heigh + line-height, it always looks different in different browsers.
Well, have you met a few of the above questions? If you do not have a good solution so far, it may be helpful to continue reading this article:
Let's take a look at several definitions of the position attribute:
position:static, Absolute, relative
Static: Default value. If you do not specify the position attribute, HTML objects that support the position attribute are static by default, so you can understand that the HTML page is treated as a document stream, and the individual labels in the source code are in the order in which they correspond to the objects. All objects that take a static value are rendered in the order of the HTML tags you write.
As shown in the following illustration, this is a common horizontal navigation that specifies the Float:left;
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
relative: relative positioning. This property value holds the position of the document stream in which the object is located, that is, it has the same rendering as static, which also occupies a fixed position in the document flow, and the object that follows does not occupy or overwrite; unlike the static property value, the relative object is set, and can be passed top, Left, right, bottom property to set its own new display position, the values of these 4 properties are relative to the previous object of the document flow, and you can set these 4 properties to the new location without any effect on the other objects in the document stream, and the original page rendering will still go its own way:
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
Absolute: Absolute positioning. Unlike the relative, this property value will drag the current object out of the document stream, and the object next to it will occupy its original position, that is, the current object's rendering is displayed independently, but its position is inherited before any of the properties are specified, left, right, or bottom. The values of the 4 attributes are relative to the browser, regardless of the flow of the document. If you set the B area in the example to absolute without specifying 4 position attributes, you can change the relative position by setting the margin to solve the problem 2 mentioned earlier.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
hint a: Su Ying's css2.0 manual mentions that the relative and absolute positioning of the scroll bar is not absolute, at least in Firefox, Opera and Safari scroll bar should appear or appear.
Tip b: The Z-index property value of the absolute object can set the order of cascading display, which is directly valid;
And the property value is the Z-index property of the relative object to be careful when setting, the current object's Z-index set to 1 is not good, in Firefox it will not be able to display (note, not to say that the browser is wrong, but refers to if the parent object is the root element body, Then Z-index is invalid, any z-index settings will not be displayed after the root element, in addition to IE's resolution bug, thank #19 hint), must be set to more than 0, if we want to let other objects block it, only the other objects also set position for relative, And take the Z-index property to a value that is larger than it.
The above statement does not know perhaps is not very clear, the concrete understanding or must own hands-on operation.
So it seems that the problem ahead is solved, problem 3 we can set it as relative or absolute positioning according to the design requirements;
There are also a number of solutions to problem 1, which are personally recommended for use with semantically DL, DT, DD, and this approach is essentially the same in different browsers (already tested in IE, Firefox, Opera, Safari), with only a few pixel differences on top properties. Because of the time relationship, I can only give my own test code for reference:
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
Body <textarea id="runcode38251">{color: #fff; font-size:12px; } ul li {float:left; height:30px; Background-color: #99CC99; margin:0 10px; padding:0; border:1px solid #c30; width:100px; } ul Li Div {border:1px solid #f00; Background-color: #996666; width:100px; height:100px; Position:absolute; margin-top:15px; margin-left:-1px; *margin-left:-79px; UL Li DL, ul Li DL DT, ul Li DL dd {margin:0; padding:0; UL Li DL dd {border:1px solid #f00; Background-color: #996666; width:100px; height:100px; Position:absolute; margin-top:11px; *margin-top:10px; margin-left:-1px; } <ul> <li> title-#text <div> pull-down menu-div </div> </li> <li > List b</li> < li> list c</li> <li> <dl> <dt> title-dt</dt> <dd> pull-down menu-dd</dd> </dl> & Lt;/li> </ul></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
To add an example, compare them in IE and non ie browsers:
<style> main {width:500px; height:500px; Background-color: #9cf; }. Layer_a, Layer_b,. Layer_c,. layer_d {position:absolute; width:100px; height:60px; }. layer_a {background-color: #69c; }. Layer_b {background-color: #369; }. layer_c {background-color: #eee; }. layer_d {background-color: #696; }. BRD {border:1px solid #c30; Margin:1em; }. block {display:block; } </style> <div class= "main" > <div class= "BRD" > A paragraph of text a text a paragraph of text a text a text <div class= "layer_a "></div></div> <div class=" BRD "> Another paragraph of text another text <div class=" Layer_b "></div>< /div> <p class= "BRD" > the third paragraph different text <div class= "Layer_c" ></div></p> <p class= "BRD The Block "> Fourth paragraph specifies the text <div class=" Layer_d "></div></p> fourth paragraph of block text <div class=" Layer_c " ></div> <map class= "BRD block" > fourth paragraph specified bLock's text <div class= "Layer_d" ></div></map> <dd class= "BRD" > Fourth paragraph specifies block text <div class= " Layer_a "></div></dd> <li class=" BRD "> fourth paragraph specified the text of the block <div class=" Layer_b "></div> </li> </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
From this example can be seen, ie will be a block element absolute positioning, if the parent element is a block-level element, then drag out the document stream, it will still inherit the coordinates of the original location;
Instead of IE browser, you drag out the document stream and navigate directly to the coordinates where the parent element resides.
