Deep understanding of position positioning and Z-index properties in CSS

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;

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:

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.

Tip A: Su Ying's css2.0 manual mentions that the relative and absolute positioning of the scroll bar are 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;