Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to use the position and z-index attributes in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In-depth understanding of position positioning and z-index attributes in CSS

Because it is not usually used, so in the past when writing CSS, the understanding of the absolute and relative values of the position attribute is relatively vague, and it is even more puzzling for the cascading of z-index. In addition to the understanding factors, the different resolution results of each browser is also a big problem. After carefully reading the CSS documents today, I finally have a deep understanding of the floating and positioning of the box model.

We are likely to encounter such problems in practice:

1. Do a horizontal navigation, and then the drop-down menu appears after the mouse is passed over, then the position control of the drop-down menu is a key.

2. We want to put several bubble tips floating on the page in a normal page layout, so we don't want the bubble prompt to destroy the normal document layout, nor do we want the bubble prompt to float around in different browsers.

3. When we insert a small icon into a normal text, we usually use the

◆ relative: relative positioning. This property value maintains the position of the object in the document stream, that is, it is rendered in the same way as static, it also occupies a fixed position in the document stream, and subsequent objects will not encroach on or overwrite Unlike the value of the static attribute, objects with relative can set their new display position through the top,left,right,bottom attribute. The values of these four attributes are relative to the previous object of the document stream. You are free to set these four attributes to the new location without having any impact on other objects in the document stream. The original page rendering will still go its own way:

◆ absolute: absolute positioning. Unlike relative, this property value will drag the current object out of the document stream, and the subsequent object will occupy the original position, that is, the rendering of the current object is displayed independently, but its location is still inherited before any attribute of top,left,right,bottom is specified, so the values of the four properties are relative to the browser and have nothing to do with the document stream. If you set the B area in the example to absolute instead of specifying four location attributes, you can change its relative position by setting margin. This method can solve the previously mentioned problem 2.

Tip a: Su Yu's CSS2.0 manual mentioned that the difference between relative and absolute positioning scroll bar is not absolute, at least in firefox, opera and safari scroll bar will still appear.

Tip b: the z-index property with a value of absolute object can set the order of cascading display, which is directly valid

The property value of relative object's z-index property should be set carefully, it is not possible to set the current object's z-index to-1, it cannot be displayed in firefox, it must be set to 0 or more, if we want other objects to block it, we can only set position to relative for other objects, and take the z-index property to a larger value than it.

The above statement may not be very clear, but you still have to do it yourself.

In this way, the previous problem has been solved. Problem 3 can be set to relative or absolute positioning according to the requirements of the design.

There are also many solutions to problem 1. It is recommended to use semantic dl,dt,dd to implement this method, and this method is basically the same in different browsers (it has been tested in ie,firefox,opera,safari), only a few pixels are different in the attributes of top. Due to time constraints, I can only give my own code for testing for reference:

◆ sample code:

Body {color:#fff; font-size:12px;} ulli {float:left; height:30px; background-color:#99CC99; margin:010px; padding:0; border:1pxsolid#c30; width:100px;} ullidiv {border:1pxsolid#f00; background-color:#996666; width:100px; height:100px; position:absolute; margin-top:15px; margin-left:-1px; * margin-left:-79px } ullidl, ullidldt, ullidldd {margin:0; padding:0;} ullidldd {border:1pxsolid#f00; background-color:#996666; width:100px; height:100px; position:absolute; margin-top:11px; * margin-top:10px; margin-left:-1px } title-# text drop-down menu-div div > li > list bli > list cli > title-dtdt > drop-down menu-dddd > dl > li > ul > "how to use position and z-index attributes in CSS" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.