# # Js comprehensive analysis of the Position keyword static, fixed, absolute, relative values of four properties

1 static (static positioning)

static: the default value. Not located , elements that appear in the normal stream ignored top, bottom, left, right or z-index statement.

2 relative (relative positioning)

relative: generating element relative positioning, by top, bottom, left, right disposed relative to its normal (original itself) to locate the position . It can be classified by hierarchical z-index. When using relative positioning Relative positioning, the space occupied by the element originally the same position, to "the original element" in the upper left position for the center, offset position according to the left and top settings. Boils down to this, regardless of the presence of the parent does not exist, with or without TRBL, are based on the parent's upper left corner for positioning, but the parent Padding property will be its impact.

3 absolute (absolute positioning)

absolute: generating absolute positioning element, relative to the first parent element is positioned outside the static positioning . Position of the element by "left", "top", "right" and "bottom" predetermined attribute. It can be classified by hierarchical z-index. However, the relative differences in the normal stream which is in a position no longer exists .
To put a property to absolute positioning element positioned within the parent element, the following two conditions must be met:
  1. Set TRBL
  2. Position the parent attribute setting

4 fixed (fixed positioning):

fixed: generating element absolute positioning, relative to the browser window positioning. Position of the element by "left", "top", "right" and "bottom" predetermined attribute. It can be classified by hierarchical z-index.

Published 59 original articles · won praise 2 · Views 4643

Guess you like

Origin blog.csdn.net/lch551218/article/details/104791177