Position positioning--the attribute of love and hate

About CSS in the position this property, in use, sometimes very powerful, and sometimes very helpless.

When powerful, for some small objects in the div is inconvenient to use margin or padding, give and Position:absolute, and then equipped with left, right, top and bottom, basically is where to put where.

Let people helpless, is that once we misuse position this positioning attribute, will let their layout fly all over the sky is, and because Z-index not set, basically, the overall layout will let you unprepared, find the reason, and very troublesome, finally, I am afraid can only be pushed back to do.

So, for the position attribute, we need to understand in detail how it works, and the scenario in which it is applied, so that we can perfectly drive it when we want it to do what we want.

Don't say much nonsense, go straight to the steps, first say the concept of position

Position, we Baidu, we know the meaning of this word is the direction, in CSS, is the meaning of positioning, the property name is position, the attribute value has five, respectively is static (default positioning), absolute (absolute positioning), Relative (relative positioning), fixed (stationary positioning), inherit (inheritance positioning, not commonly used).

Writing rules:

Position:static|absolute|relative|fixed|inherit

Let's introduce each property value.

1, position:static (default positioning)

As the name implies, we usually write, each div in the document flow default layout, is the static property value, it will not let div or other elements out of the document flow, but follow the principle of typesetting, from top to bottom, block-level element line, line elements do not wrap, etc. general principles, so, This position does not have to be set if the property is not positioned.

2, position:relative (relative positioning)

Relative positioning, is relative to their own to make a move, it will not be out of the document flow, that is, I give an element set this property, then this file will be moved back and forth in this document flow, as to how to move, the following again.

3, Position:absolute (absolute positioning)

Unlike relative positioning, it is positioned to move relative to the parent element that owns the relative positioning property , which is detached from the document flow.

If all the child elements in the parent element are set to absolute, then all the child elements will float up and stacked together, so in order to spread out the elements, we need to move the elements, and the way to move them is to write directly in the style stylesheet: left, Right, top, bottom four properties, and then write the px (pixels),% (percent), and so on after the property to represent the units of distance.

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

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

So, in order not to let the elements you set up to fly, then remember to set the parent element relative it.

4. Fixed (stationary positioning)

This positioning is relative to the browser window, the Move method is the same as the relative and absolute positioning.

It also comes out of the text stream, and our common sidebar or ad map is implemented with this feature. Very practical, very powerful features.

　　5, Inherit (inheritance positioning), is inherited from the parent element position positioning properties, not commonly used.

In this case, we are dealing with a z-index (level) problem. As we have just said, if the child elements are all set to absolute, then all the child elements will be stacked together to cover each other.

If we need to stack a lot of layers on one element, how do we sort them? This will require the use of the Z-index attribute.

The property value of the Z-index property is a number. The bigger the number, the more it shows, for example,

Z-index=0 elements will be z-index=1 the following display, z-index=10 will z-index=8 the above display, so, stacked their display order, set z-index on it.

Of course, if you do not set Z-index, the default, the following element will obscure the preceding element.

　Issues to be aware of when using:

1, the Float property can not be shared with the position attribute, remember!

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

3, in addition to left and top outside, there are right and bottom, ingenious

4, can not position without position, after all, it is easy to mess up the layout

5, JavaScript calls position method is: div.style.positio= "absolute" similar div is the variable name

Above is just a brief talk about the basic things position, if you do not know the answer you want, you can leave a message below, I will actively reply.

Finally, positive exchanges and common progress!

Position positioning--the attribute of love and hate