CSS Absolute and float,relative,z-index are different

Great God occupies the building:

Pinterest Zhang Xinlin

http://www.jianshu.com/p/a3da5e27d22b

Extract:

Float is deceiving the parent element so that its parent element mistakenly thinks it is highly collapsed, but the float element itself is still in the document flow, and the text wraps around the float element and is not obscured.

Absolute (High level) in fact, is not considered to deceive the parent element, but there is a hierarchical relationship.

Once the element is added absolute or float is equivalent to adding display:block to the element, it is possible to set the width width of the element.

The absolute element of Left/top/right/bottom is not specified, and its anchor point in the hierarchy is the anchor point for that element in the normal document flow.

One more attribute means one layer of maintenance.

CSS has a detail to pay attention to: with absolute left:0;right:0;top:0;bottom:0, to achieve full-screen stretching, for the absolute element, if you set both left and right will be stretched horizontally, Setting both top and bottom will stretch vertically. So why not set Width/height to 100%? The code has been posted to you, you can try it yourself. Let me tell you the answer, as I said earlier, without Top/right/top/bottom, Absolute will start positioning from where the normal document flow should be, so it won't be full-screen. Unless you set Width/height to 100%, and then set left:0; top:0;.

It is recommended that the absolute control is hidden and displayed. The method is certainly quite simple, such as absolute+ top:-9999em, or absolute + Visibility:hidden.

Set the relative positioning property in the parent element, and set the absolute positioning property in the child element. Absolute positioning out of the document flow, you need to set positioning information.

CSS Absolute and float,relative,z-index are different