CSS Properties-Position explanation

The Postion property defines the position of an element in the page layout and its effect on the surrounding elements. This property has a total of 5 values:

1. position:static
2. Position:inherit
3. position:relative
4. Position:absolute
5. position:fixed

The application of these 5 values is explained in turn.

position:static

staticAs position the default value for a property, the static element follows the normal document flow and ignores top,bottom,left,right such attributes.

Position:inherit

inheritValues, like the values of other CSS properties inherit , inherit the value of the parent element position .

position:relative

relative  element follows normal document flow, so the surrounding element does not ignore its presence Relative   elements also support   top,bottom,left,right and other properties. When we use   properties such as top,bottom,left,right to  , relative   elements are somewhat similar to the effect of   margin   Properties achieved, but the difference is ,   relative   elements around the element will be ignored   relative   element's movement. We note that when   relative   element is not used for relative positioning using positional properties, it is not ignored by the surrounding elements, but when positioned with the positioning property, the surrounding elements are ignored relative Elements are moved, they assume that the relative element is still in its original position and not moved, and we use an example to illustrate:

<style= "position:relative">Im a relative element</  div><Div>Im A default element</Div >

//并未忽略 relative 元素的存在

<style= "position:relative;top:10px">Im a relative element</  div><Div>Im A default element</  div>

//忽略了 relative 元素的移动

Position:absolute

Absolute   elements will be out of normal document flow, so The elements around it will ignore the presence of . like   absolute   element   display   properties are set to   none  . At this point, we can use &NBSP, top,bottom,left,right   and other properties to absolutely position the   absolute  element. In general, define two properties, top or bottom,left or right .
This absolute positioning needs a little understanding, because it's easy to confuse relative.
For example, when on   absolute   element add   left:10px  to locate the   left   which element is it? In fact, the first parent element of the absolute  element is looked up at this point, if the parent element's   position   value exists (and is not   Static ), then this   left:10px   is positioned according to the parent element, otherwise it will continue to find the parent element of the parent element, dating back to a parent element with a non-  static     position   value, if there is no parent element that satisfies the condition, it will be based on the outermost   window   To locate.

<style= "Position:absolute">Im an absolute element</ Div > < Div > Im a default element</div>

//直接忽略 absolute 元素的存在

position:fixed

fixedThe element will be detached from the normal flow of the document, so it is absolute very similar to the element, is ignored by the surrounding elements, and supports top,bottom,left,right attributes, but the two are still very different.
First, fixed element positioning has nothing to do with its parent element, which is always positioned relative to the outermost layer window .
Second, the element, like fixed its name, is fixed somewhere on the screen and does not disappear because of the scrolling of the screen.

Z-index

z-index   properties? That's because   z-index   Properties are valid only for anchored elements, that is,   position   value is absolute,relative,fixed   is valid. We first understand what is called   z-index .

<style= "position:absolute;z-index:1">Im an absolute element  </div><style= "Position:fixed;z-index:2"  >Im a fixed element</div>

//fixed 元素 z-index 比 absoulute 元素高，所以显示在前面

(I put the background tone as non-transparent, so I can see it more clearly), what happens if the Z-index value is the same?

<style= "position:absolute;z-index:1">Im an absolute element  </div><style= "Position:fixed;z-index:1"  >Im a fixed element</div>

//z-index 值相同，仍然显示为 fixed 元素
So we know that when the Z-index value is the same, the post-loaded element shows precedence.

With regard to the Z-index attribute, the hierarchy of the upper and lower hierarchies is also hierarchical according to the tree structure, the diversity between precedence parent elements, and the hierarchical ordering of child elements depends on the hierarchy of the parent element.

For example:
A element of a z-index:1; Its parent element z-index:100,
A b element z-index:100; Its parent element z-index:99,
A C element z-index:2; The parent element is the same as a

The display level of a element in the browser must be better than the B element; C shows a higher level than a element;

Reference: http://www.vanseodesign.com/css/css-positioning/
Reprint Address: http://segmentfault.com/a/1190000000467348

If you feel that this article is helpful to your study, please support and encourage more.

CSS Properties-Position explanation