定位
定位(position):用来检索或者设置元素的定位方式(改变元素位置的属性)
position的属性值有static、absolute、relative、fixed、sticky
注:使用了定位属性margin:auto会失效。
使用定位的步骤
1:给元素添加position属性
2:寻找参照物
3:添加坐标(四坐标:top、bottom、left、right)
静态定位(static)
position的默认值,默认文本流的状态。
不会识别left right top bottom指定的坐标
注:加了静态定位等于无作用,默认值不识别坐标。如下图
绝对定位(absolute)
1: 参照物:按照已经有定位的父元素进行位置的变化。
2: 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。
3: 绝对定位,脱离文档流、不占据空间
注:此图父子元素都用了绝对定位,根据坐标进行了移动。
相对定位(relative)
1 : 参照物:自身默认的位置!
2 : 始终占据空间,不会破坏文档流
注:以下两图可做对比
固定定位(fixed)
1 : 参照物:浏览器窗口
2 : 脱离文本流,不占据空间
注:比较下面两图可知红色盒子固定位置了!
黏性定位(sticky)
1:position:relative 和 position:fixed的结合。
2:页面没超出窗口范围,按照relative 执行
3:内容超出窗口位置,按照fixed执行。
感兴趣的朋友可以尝试一下,谢谢大家的观看!!!