静态定位
position: static
【默认】
此时,元素按 文档流 的方式排布:
- 以左上角为起点
- 内联元素 从左到右依次排布,当一行排不下时,自动换到下一行继续从左到右排布
- 块级元素 独占一行
此时,top、left、right、bottom、z-index 等样式无效。
相对定位
position: relative
相对于原文档流的位置,进行上下左右的偏移,因 原文档流的位置会保留,所以其他元素的位置不会被影响。
- left:右移
- right:左移
- top:下移
- bottom:上移
上方 样式的名称和实际效果的方向相反,小心出错!
- top/bottom 同时使用的时候,bottom 无效;
- left/right 同时使用的时候,right 无效
- left/top/right/bottom 的样式值为百分比时,相对于父元素进行计算,而不是自身,如果父元素没有高度,则 top/bottom 无效。
绝对定位
position: absolute
依据最近一层的定位元素(position 值为 absolute/relative/fixed 的元素)定位,若无定位元素,则依据 body 定位。
position: absolute
必须配合 left,right,top,bottom 一起使用,否则元素还在原文档流的位置。
当元素依据 body 标签定位时:
- top 属性为元素上边框外侧与 body 上边框内侧间的距离
- bottom 属性为元素下边框外侧与 浏览器窗口下边框 内侧间的距离
- left 属性为元素左边框外侧与 body 左边框内侧间的距离
- right 属性为元素右边框外侧与 body 右边框内侧间的距离
当元素依据其他定位元素定位时:
- top 属性为元素上边框外侧与 定位元素 上边框内侧间的距离
- bottom 属性为元素下边框外侧与 定位元素 下边框内侧间的距离
- left 属性为元素左边框外侧与 定位元素 左边框内侧间的距离
- right 属性为元素右边框外侧与 定位元素 右边框内侧间的距离
当 left,right,top,bottom 的值为百分比,且元素是图片时:
- top 和 bottom 属性最终的值 = (定位元素的高度 - 元素的高度)* 百分比
- left 和 right 属性最终的值 = (定位元素的宽度 - 元素的宽度)* 百分比
当对立方位的属性都有值时,绝对定位元素会像流体一样充满整个空间,比如 纯CSS 实现全屏遮罩
元素绝对定位后,会发生以下变化:
- 脱离文档流(原文档流的位置不会保留)
- display 最终的值为 block/table ,但宽度不会自动撑满整行,还是由其内容决定(无法设置宽高的内联元素在绝对定位后,也可以设置宽高)
【实战】子绝父相
父元素相对定位,子元素绝对定位,常用于实现子元素重叠在父元素上。
【实战】水平垂直居中
固定定位
position: fixed
相对于浏览器窗口进行定位,无论页面如何滚动,其位置都保持不变。(IE6不兼容)
position: fixed
必须配合 left,right,top,bottom 一起使用,否则元素还在原文档流的位置。
元素固定定位后,会发生以下变化:
- 脱离文档流(原文档流的位置不会保留)
- display 最终的值为 block/table ,但宽度不会自动撑满整行,还是由其内容决定 (无法设置宽高的内联元素在绝对定位后,也可以设置宽高)
【实战】返回顶部
【实战】顶部导航
黏性定位
position: sticky
- 当元素在浏览器窗口内时,随页面滚动
- 当元素抵达浏览器窗口的边框时,元素不再随页面滚动。
- 通过 top、left、right、bottom 属性,可以设置元素不再随页面滚动的具体位置
- 同时设置 top、bottom 时,上下两个方位的黏性效果会同时生效。
- 同时设置 left、right 时,左右两个方位的黏性效果也会同时生效。
- 多个黏性定位元素在同一容器中会重叠,在不同容器中会依次推开【推荐】,见链接 https://demo.cssworld.cn/new/3/4-3.php
- 黏性定位元素的祖先元素中不能有可滚动元素。
- 黏性定位元素的父元素高度不能和黏性定位元素的高度相同(否则没有实现黏性效果的空间)
【实战】黏性导航
https://demo.cssworld.cn/new/3/4-1.php
【实战】通讯录的首字母滞黏
https://demo.cssworld.cn/new/3/4-3.php
【实战】层次滚动
https://demo.cssworld.cn/new/3/4-4.php
实现原理:
- 标题和网友评论都使用黏性定位
- 通过z-index: -1 默认隐藏网友评论
- 每个标题都在不同的容器