各种 定位

一、定位

 　   position 定位：

            -是一种更高级的布局手段；

            -使用 position 属性来设置；

                可选值：

                static默认值；（不开启定位）

                relative 开启相对定位

                absolute 开启绝对定位

                fixed 开启元素的固定定位

                sticky 开启元素的粘滞定位

 

二、 相对定位

　　

　　position ：relative ；

 

　　- 元素开启相对定位后，如果不设置偏移量则不会发生任何变化；

　　- 元素开启相对定位后，元素层级提升，但没有脱离文档流；

　　- 不会改变元素性质（块元素还是块元素）

 

　　　　　-偏移量：

　　　　　　　　left ，right，top ，bottom

 

三、绝对定位

 

　　position  : absolute ；

　　

　　- 特点：

　　1. 元素开启绝对定位后，提升层级，从文档流中脱离 ；

　　2. 元素开启绝对定位后，改变元素性质，行内变成块，宽高被内容撑开 ；

　　3. 绝对定位是参照其包含块进行定位的

 

　　　　- 包含块：

　　　　　　正常情况下，包含块就是离他最近的开启了定位的祖先元素 ；

　　　　　　如果没有祖先元素开启定位，那么根元素 html 就是他的包含块，所以 html 被称为根元素又被叫做 初始包含块

 

四、固定定位

 

　　position：fixed ；

 

　　-特点 ：

　　大部分与绝对定位一样，但差别在于它永远参照网页视口进行定位，不会随着网页的滚动而滚动（具体参见生活中的广告或者京东主页面）