CSS floating, absolute, relative positioning

Tag: The horizontal unit Z-index occupies the beginning of the default fixed nbsp

Floating

Float: Property {

Float:none; Default value, object, not floating

Float:left; The text flows to the right of the object

Float:right;

};

Clear floating

Clear: Property {

Clear:none; Allow objects to float two times

Clear:left; Floating on the left is not allowed

Clear:right; Do not allow floating on the right

Clear:both; It's not allowed to float two times.

};

Positioning

Position: Property {

position:static; Static positioning

position:fixed; Fixed positioning

Position:absolute; Absolute positioning

position:relative; Relative positioning

};

Absolute Positioning (Absulote): Drag an object out of the document stream using the Left,rigt,top,bottom property, absolute positioning relative to the closest parent object with a positioning setting, if no such parent object exists, then the body object. Absolute positioning objects can cascade, cascade order can be controlled by the Z-index property, Z-index value is no unit of integers, large at the top, can have negative values (currently negative FF is not supported).

Relative positioning (relative): objects are not stackable, but, Left,right,top,bottom, these properties are offset in the normal document flow. You can also use Z-index layering design.

Image interpretation of positioning

(1) absolute positioning (absolute)

If used to determine positioning, the absolute positioning of the object will give up its original occupied position, it is contributing. If the parent element is not positioned before, then the position of the child element is not affected by the position of the parent element, how the parent element is moved, the child element is in its original position, and where the child element is to be located, the upper corner of the HTML (upper left corner of the body), whichever is the Left,right,top,bottom value, But if the parent element also gives the positioning setting (usually relative positioning), the position of the child element is not so free, even though the child element changes position without affecting the parent element (the text flow), but it is also to follow the parent element, the parent element tells it "you can move, but you should move around in my range, Let's say I want you in my upper left 1 meters, you have to die this, I go you have to follow away ", courseware absolutely positioned object reference target is its parent pole. Professional punishments are called containment blocks.

(2) relative positioning (relative)

Relative positioning one of the biggest features is: oneself through the position left also occupies the original position, will not give him around the text flow and other objects, relative positioning also relatively independent, do what he own the decision, to locate, it is in its own position offset, text flow relative positioning object also has influence, Because the object is not really out of the flow of text, it is as if two people will have friends in the process of moving horizontally on the same floor.

Summarize the characteristics of two kinds of positioning

Absolute positioning is like arranging different objects into different floors of moving tall buildings, they do not affect each other, but how they move is related to the foundation and area of your building (parent pole), relative positioning refers to the object or the first floor with the text stream stored together, there must be an impact between them.

When using relative positioning and absolute positioning, there is a situation where they use negative value of the positioning of the object can move in the opposite direction, just said the object arranged in a building of different layers, if an object is back to the outermost wall at the beginning, and then with a negative position it, he will magically run out of the wall, Of course, there is no such thrilling and magical thing to happen in reality.

For normal page layouts, it is not the last resort to use absolute for positioning.

want to refactor high-quality pages, less absolute positioning layout !

CSS floating, absolute, relative positioning