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

Editor to share with you the example analysis of position in css, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Position, we know that the word means orientation in css. The attribute name is position, and there are five attribute values, namely static (default positioning), absolute (absolute positioning), relative (relative positioning), fixed (fixed positioning) and inherit (inherited positioning, not commonly used).

Writing rules:

Position:static | absolute | relative | fixed | inherit

Please introduce each attribute value.

1. Position:static (default positioning)

As the name implies, when we usually write, the default typesetting of each div in the document stream is the static attribute value, which does not make div or other elements out of the document stream, but follows the principle of typesetting, from top to bottom, block-level elements wrap, elements in the line do not wrap and other general principles, so, if you do not need to locate the attribute, then this position does not have to be set.

2. Position:relative (relative positioning)

Relative positioning, which is defined as moving relative to itself, will not deviate from the document stream, that is, if I set this attribute for an element, then the file will also move back and forth in the document stream, as for how to move. I'll talk about it later.

3. Position:absolute (absolute positioning)

Unlike relative positioning, it moves relative to the parent element that has the relative positioning attribute, and it deviates from the document stream.

If all the child elements in the parent element have absolute set, then all the child elements will float and stack together, so in order to spread out the elements, we need to move them, and the way to move them is to write them directly in the style stylesheet: left, right, top, bottom Then write px (pixels),% (percentage) and other units that can represent the distance at the end of the attribute.

Here, we would like to emphasize that left and right cannot be used at the same time, and top and bottom cannot be used at the same time.

Also, all four elements are moved relative to the parent element that has a relative positioning (relative) attribute. If the parent element has no relative positioning, then the absolute positioning is relative to the body.

So, in order not to let the element you set up run away, remember to set relative for the parent element.

4. Fixed (fixed positioning)

This positioning is relative to the browser window, moving in the same way as relative and absolute positioning.

It will also break away from the copy stream, and our common sidebar or advertising images are implemented with this function. Very practical, very powerful function.

5. Inherit (inheritance positioning), which inherits position positioning attributes from the parent element, is not commonly used.

At this point, we come to the issue of z-index (hierarchy). As we said just now, if you set absolute for all the child elements, then all the child elements will be stacked on top of each other, covering each other.

If we need to stack multiple layers on an element, how do we sort them? This requires the z-index attribute.

The property value of the z-index property is a number. The larger the number, then it shows the most successful, for example,

The elements of z-index=0 will be displayed under the z-index=1, and the z-index=10 will be displayed above the z-index=8, so stack them in the order in which they are displayed and set the z-index.

Of course, if z-index is not set, by default, the following elements will obscure the previous elements.

Problems that should be paid attention to when using:

1. The float attribute cannot be shared with the position attribute. Remember!

2. Remember to add relative to the parent element when using absolute

3. In addition to using left and top, there are also right and bottom to learn and use.

4. If you don't need position, you don't need position. After all, it's easy to mess up the layout.

5. The method of calling position in Javascript is: div.style.positio= "absolute" is similar to div is the variable name

The above is all the content of the article "sample Analysis of position in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.