css定位属性:position 作用为检索或者设置元素的定位方式(改变元素的位置的属性)
那position有哪些属性值呢?
1.静态定位:static
position的默认值,默认文本流的状态
不会识别left、right、top、bottom 指定的坐标
2.绝对定位:absolute
参照物:按照已有定位的父元素进行位置的变化
假如当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物
绝对定位,脱离文档流,不占据空间
3.相对定位:relative
参照物:自身默认的位置
始终占据空间,不会破坏文档流
4.固定定位:fixed
参照物:浏览器窗口
脱离整个文档流,不占据空间
5.粘性定位:sticky
相对定位relative 和 固定定位fixed 的结合
如果页面没有超过窗口范围,按照relative执行
如果页面超过窗口设置,按照fixed执行
**定位的步骤**
1.给元素添加 position属性,证明元素要做位置的变化
2.确定参照物(通过position属性的属性值来确定:static/absolute/relative/fixed/sticky)
3.确定坐标: left盒子往右移
right盒子往左移
top盒子往下移
bottom盒子往上移
ps:负数表示相反方向
现在让我们来实操一下吧!!!
绝对定位:
1.现在是没有添加定位的情况下
现在我们开始添加定位
相对定位 因为自身就是参照物,只要给自身添加定位relative 就可以了
固定定位
固定定位:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。
ps:IE6不兼容。
用途1:网页右下角的“返回到顶部”
用途2:顶部导航条
固定在网页顶端的导航条,可以用固定定位来做。
Z-index属性
1.后定位的元素会把前面定位的盖住
2.控制定位元素的层次关系
3.默认值为一个数字(可以为负数),数字越大,层次关系越高
4.默认值 auto
包含块的设置
1.如果父元素为参照物 添加:position:relative;
2.给要做定位的子元素 添加:position:absolute;