Author: cutsin
Original address: http://www.moonless.net/blog/2007/09/csspositionz-index.html
Note: This article is for Exchange use only, if has the improper place to welcome the criticism to correct, but please specify detailed, thanks!
Because usually not used, so in the past when writing CSS for the position attribute of the absolute, relative value understanding is more vague, for the z-index Cascade is not touched the mind, in addition to understanding the factors, the various browser analysis results are also a big problem. Today carefully read the CSS document, finally, the box model floating, positioning has a relatively deep understanding.
We are likely to encounter such problems in practice:
1, do a horizontal navigation, and then the mouse after the drop-down menu appears, then the drop-down menu position control is a key;
2, we want to put a few floating on the page in a normal layout of the bubble tip, when you do not want to let the bubble hint damage the normal layout of the document, but also do not want to locate the bubble tip in different browsers everywhere wandering.
3, when we insert a small icon in a normal text, will generally use the label, and then its vertical center problem is confusing, whether you use HTML attributes Absmiddle, or use CSS properties vertical-align, or use the parent object Heigh + Line-height, it will always look different in different browsers.
Well, have you met some of the above questions? If you do not have a good solution so far, you may want to continue reading this article, may be helpful to you:)
Let's take a look at a few value definitions of the Position property:
position:static, Absolute, relative
Static: Default value. If you do not specify the Position property, the HTML object that supports the Position property is static by default, so you can understand that the HTML page is treated as a flow of documents, where the order of the individual tags in the source code is the rendering sequence of the objects they correspond to. All objects with static values are presented in the order in which you wrote the HTML tags.
As shown, this is a common designation for the Float:left, the horizontal navigation:
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor= ' hand '; this.alt= ' Click here to Open new Window\nctrl+mouse wheel to Zoom in/out ';} ' Onclick= "if (!this.resized) {return true;} else {window.open (THIS.SRC);}" alt= "" src= "http://lh6.google.com/cutsin/ Ruujqz6tmoi/aaaaaaaabuo/v0kybuwgxok/s400/css_position_1.gif "onload=" if (this.width>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 preserves the position of the object in the document flow, that is, it has the same rendering as static, it also occupies a fixed position in the document flow, the subsequent objects are not encroached upon or overwritten; Unlike the static property value, the relative object is set to Left, right, the bottom property sets its own new display position, the value of these 4 properties is relative to the previous object of the document flow, you can freely set these 4 properties to offset to the new position without any effect on other objects in the document flow, the original page rendering will still go its own way:
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor= ' hand '; this.alt= ' Click here to Open new Window\nctrl+mouse wheel to Zoom in/out ';} ' Onclick= "if (!this.resized) {return true;} else {window.open (THIS.SRC);}" alt= "" src= "http://lh6.google.com/cutsin/ Ruujqz6tmpi/aaaaaaaabuw/om-pvjxvubu/s400/css_position_2.gif "onload=" if (this.width>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 relative, this property value drags the current object out of the document stream, and the subsequent object occupies its original position, that is, the rendering of the current object is displayed independently, but its position is still inherited before the specified top, left, right, bottom any property. At this point the value of the 4 attributes is relative to the browser, regardless of the document flow. If you set the B area of the example to absolute without specifying 4 positional attributes, and you change its relative position by setting a margin, this method solves the previously mentioned problem 2.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor= ' hand '; this.alt= ' Click here to Open new Window\nctrl+mouse wheel to Zoom in/out ';} ' Onclick= "if (!this.resized) {return true;} else {window.open (THIS.SRC);}" alt= "" src= "http://lh6.google.com/cutsin/ Ruujqz6tmqi/aaaaaaaabu4/virrlin-coi/s400/css_position_3.gif "onload=" if (this.width>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: 苏昱彰eight's css2.0 manual mentions that the relative and absolute scroll bar differences are not absolute, at least in Firefox, Opera, and Safari when the scroll bar appears.
hint B: The Z-index property of the absolute object can set the order of Cascade display, it is directly valid;
The Z-index property value of the relative object is set to be careful when setting the current object's Z-index to-1 is not possible, in Firefox it will not display (note, not the browser is wrong, but that if the parent object is the root element body, Then Z-index is not valid, any Z-index settings will not appear after the root element, in addition to IE resolution Bug, thanks to #19 hint, must be set to 0 or more, if we want to let other objects block it, only the other objects are also set position to relative, And take the Z-index property to a value larger than it.
The above statement does not know may not be very clear, the specific understanding or to do their own hands-on.
In this case, the previous problem has been solved, problem 3 we can according to the requirements of the design to set it to relative or absolute positioning;
There are a number of solutions to the problem 1, the personal recommendation of the use of a semantic dl, DT, DD to achieve, and this method in different browsers performance is basically the same (already in IE, Firefox, opera, Safari test), only the top of the properties of a few pixel differences, Because of the time relationship, I can only give the code of my own test for reference:
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor= ' hand '; this.alt= ' Click here to Open new Window\nctrl+mouse wheel to Zoom in/out ';} ' Onclick= "if (!this.resized) {return true;} else {window.open (THIS.SRC);}" alt= "" src= "http://lh5.google.com/cutsin/ Ruuxtj6tmri/aaaaaaaabva/qi7eoq8e2nu/s800/css_position_4.gif "onload=" if (this.width>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>
<textarea id="runcode59966">Body {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:15 px 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: #99666 6; width:100px; height:100px; Position:absolute; margin-top:11px; *margin-top:10px; margin-left:-1px; } <ul> <li> title-#text drop-down menu-div </li> <li style= "position:relative;" > List b</li> <li> list c</li> <li> <dl> <dt> title-dt</dt> <dd> drop-down menu-dd</ dd> </dl> </li> </ul></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
To add an example, watch the comparison between IE and non-IE browsers:
<textarea id="runcode51680"><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> a paragraph of text a paragraph of text a paragraph of text a paragraph of text a paragraph of text another paragraph of text another paragraph of text another paragraph of text <p class= "BRD" > third paragraph different text third paragraph different text </p> <p class= "BRD block" > Fourth paragraph specifies block text </p> fourth paragraph specifies block text <map class= "BRD block" > Fourth paragraph specifies block text </map> <dd class= "BRD" > Fourth paragraph specifies block text </dd> <li class= "BRD The > Fourth paragraph specifies the block's text </li></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
As you can see from this example, when IE is absolutely positioning a block element, if the parent element is a block-level element, then it will still inherit the coordinates of the original location after dragging out of the document stream;
Instead of IE, drag out the document stream and navigate directly to the coordinates where the parent element is located.
