CSS—定位

定位方式属性：

定位方式属性position

属性：position

取值： static  relative : 相对的 absolute : 绝对的 fixed : 固定的

定位偏移属性

偏移属性

属性 ： top :取值为正，向下移动，取值为负，向上移动 right 取值为正，向左移动，取值为负，向右移动 bottom 取值为正，向上移动，取值为负，向下移动 left：取值为正，向右移动，取值为负，向左移动

取值 ：以 px 为单位的数值

定位方式：

相对定位:relative

相对定位：relative; 元素会相对于它原来的位置偏移某个距离

语法：position:relative; 配合着top/right/bottom/left实现位置的微调

注意： 多数会实现在位置微调时使用

 

绝对定位:absolute

绝对定位：absolute 1、绝对定位的的元素会脱离文档流，不占页面空间 2、绝对定位的元素会相对于离它最近的，已定位的，祖先元素 去实现位置的初始化和偏移  3、如果不存在已定位的祖先元素的话，那么就相对于body去实现位置的初始化和偏移

语法：position:absolute; 配合着偏移属性top/right/bottom/left实现位置的偏移

特点 1.绝对定位元素会脱离文档流，所以会压在其它元素之上 2.绝对定位的元素会变为块级元素 3.绝对定位的元素margin可以正常处理，但margin:0 auto 会失

 绝对定位的元素会相对于离它最近的，已定位的，祖先元素 去实现位置的初始化和偏移 
 如果不存在已定位的祖先元素的话，那么就相对于body去实现位置的初始化和偏移 

 例如d3的祖先是d2和d1,如果d2、d1都没有进行定位，就相对于body去实现位置的初始化和偏移 

 d3的祖先是d2和d1, d2进行了定位，就相对于d2去实现位置的初始化和偏移

 d3的祖先是d2和d1,  d1进行了定位，就相对于d1去实现位置的初始化和偏移

 

固定定位：fixed

固定定位：fixed 将元素固定在页面的某个位置处，位置不会随着滚动条而发生改变。固定在可视化的区域中。

语法：position:fixed; 配合着 top / right / bottom / left 改变位置

注意 1、固定定位的元素会脱离文档流-不占页面空间  2、固定定位的元素会变成块级元素  3、固定定位的元素永远都是相对于body去实现位置的初始化和偏移

      固定定位后，左右两边红色的span不会睡着滚动条滚动。

堆叠顺序 z-index

堆叠顺序 z-index: 一旦将元素变为已定位元素的话，元素们则有可能出现堆叠的效果

属性：z-index

取值： 无单位的数字，数字越大越靠上

注意： 1. 只有已定位的元素才能使用z-index  2.父子元素间，z-index 无效，永远都是子压在父上

   效果展示：

关于定位的分享就先到这里，如果本篇博客对您有所帮助，记得点个赞哦！