Shulou(Shulou.com)06/03 Report--

This article is about the usefulness of the position attribute in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Absolute of position (absolute positioning)

Here, the absolute positioning of position's absolute is divided into two categories:

A: a position:absolute is defined for the element, and its parent framework does not define any position attributes. At this time, the absolute positioning is relative to the innermost edge around the page, and the location will be calculated according to the 0 o'clock in the upper left corner of the browser. Absolute positioning makes the element independent of the document flow, so it does not occupy space. The location of the element is specified by the "left", "top", "right", and "bottom" attributes. Its position is not affected by the parent frame and is calculated only from the edges around the page. The code is as follows:

Position .demo {position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all {width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;} position:absolute; left:100px; top:200px

The effect is as follows:

B: position:absolute is defined for the element, and its parent framework defines the position:absolute\ position:relative\ position:fixed attribute. In this case, the absolute positioning is relative to the innermost edge of the parent frame, and the absolute positioning makes the element independent of the document flow, so it does not occupy space. The location of the element is specified by the "left", "top", "right", and "bottom" attributes. Its location is changed only within the parent frame, and the code is as follows:

Position .demo {position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all {width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative} position:absolute; left:100px; top:200px

The effect is as follows

Therefore, if the positioning of the page element, want to be defined in the parent element, regardless of the display resolution, browser window size and other restrictions, it is recommended to use the B scheme.

2. Relative (relative positioning) of position

If an element is relatively positioned, it will first appear in its position. Then move the element "relative to" its original starting point by setting the vertical or horizontal position. (another point, in relative positioning, the element still occupies the original space, whether it is moved or not. Therefore, moving the element causes it to overwrite other boxes.

Relative is indeed positioned relative to itself. The parent DIV sets position:relative and does not give a value, so it has no effect.

But it serves as a reference for its child elements.

3. The fixed fixed of position always takes body as the positioning object, always locates the elements according to the browser window, and locates the elements through the attributes of "left", "top", "right" and "bottom".

There seems to be a lot more about the use of position, but the editor's ability to organize the language is not very good. Let's sum up the usage:

When you need to make a drop-down secondary menu effect, the parent element you need position:relative, and the drop-down element inside requires position:absolute.

When you need to make an ad that floats on a page, or make a button to return to the top of the page, you need position:fixed.

Usually we use position:absolute;position:relative for absolute positioning layout, define positioning through CSS, DIV layout HTML, pay attention to where to use position:relative, where to use position:absolute for positioning, and do not forget to use the cooperation of left, right, top and bottom to locate the specific location. Absolute positioning if the parent uses position:absolute absolute positioning instead of position:relative, the body tag will be used as the parent. No matter how many layers of DIV the object is located in, it will be dragged out as the parent (reference level) for absolute positioning. Absolute positioning is very easy to use, but don't abuse it, use it everywhere, sometimes you won't bother to calculate the distance up, down, left, and right, and it may cause CSS code to be bloated and more experienced to use it appropriately.

In absolute positioning, we can use css z-index to define the overlap order of css layers.

At the same time, the accurate values of left, right, bottom and top can be obtained by using the (Photoshop) PS slicing tool.

Finally, the editor is reminding me that if your child DIV in your parent DIV uses the position:absolute attribute location, but the parent DIV does not make any definition (the parent DIV is already filled with other elements), and you want the child DIV definition to play a role, at this time you can define the child DIV without left, top, right, bottom, but using margin-top and margin-left. But the location of this method under ie6/7 is different from that under ie8/9/10/11, Firefox and Google. You need to use css Hack for ie6/7. The code is as follows:

Position .demo {position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all {width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}

Position:absolute; margin-left:100px; margin-top:200px

The effect is as follows

After using CSS Hack, the code:

Position .demo {position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;} .all {width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}

Position:absolute; margin-left:100px; margin-top:200px

The effect of each version of the browser is as follows

This method is best not to use CSS Hack adjustments that need to be adjusted back and forth in different versions of browsers!

Thank you for reading! This is the end of this article on "what is the use of position attributes in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.