position: relative / static / fixed / absolute positioning distinction and use scenario

  1. absolute is relative to the parent element to their recent positioning, relative positioning themselves with respect to the
  2. relative without departing from the document flow, absolute from the document flow. In other words: relative elements despite seeing it deviated from its original location on the surface, but in fact it still has not changed in the document flow. absolute position has changed not only the elements, but also out of the document flow. So absolute non-locating box will be overwritten.
  3. position: when the relative daily use is generally set to position: absolute; parent layer, Parent position: relative; sublayer position: absolute; then, is positioned in accordance with the boundaries of the parent layer, or position: absolute will gradually Looking up layer disposed position: border element relative until the body element ..
  4. There is also a concept of text flow. Performance in the float and relative difference, relative both from the document flow also from the text flow, and float just out of the document flow. So will show, a non-float element will overwrite box positioned, but does not cover the non-text positioned inside the box, because without departing from the text flow, non-positioned within the box around the text around the float's. For use absolute element, and the text will non-locating and self-apart positions along plane overwritten.
  5. scenes to be used;

    l Relative usage, experience cases ::

    1. To provide absolute positioning reference elements


    2. Control hierarchy with its element when there is absolute

 l two-column width adaptive, classic common practice cases ::

 

 

 

Guess you like

Origin www.cnblogs.com/shirleysblog/p/11826764.html