position 属性整理

介绍

position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移

Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。

属性

position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky

详细

• static
  默认情况
  忽略top、bottom、left、right或者 z-index等声明
• relative
  不脱离文档流
  不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置
  相对原来位置
  受top/left/right/bottom的影响
  margin与padding会产生影响
• absolute
  absolut定位可以使元素脱离文档流
  寻找父类至position非static方式定位的祖先类元素
  relative和static方式在最外层时是以body标签为定位原点的，而absolute方式在无父级是position非static定位时是以html作为原点定位
  绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。
  类似于absolute，但不随着滚动条的移动而改变位置
• fixed
  fixed定位是指元素的位置相对于浏览器窗口是固定位置
  即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。
• inherit
• initial
• sticky
  可以固定一个部分，然后到了另一个内容，又会固定另外一个部分。

文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

脱离文档流可能导致的问题

一旦子元素的position为fixed或者是absolute，那么它就会脱离文档流，这样的后果是父元素无法被撑开

解决方法1：在js中设置父元素高度等于子元素的高度。
解决方法2：给父元素强行设置高度。（对于宽度导致的类似问题就强行设置宽度）

top/bottom/left/right的标准

是指子元素的margin外侧和包裹元素的border内侧之间的距离是20px。

引用自：
https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
https://www.cnblogs.com/keyi/p/5817748.html

sticky示例代码

    
    
    


    

        

            这是头部
        
        

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

            这是内容部分

        
    
    

        

            这是另一个头部
        
        

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容

            这是另一个内容