浮动时让元素浮起来,那么定位就是把元素定在某个位置上,不让它动。
定位的元素属性
1.偏移
top:顶部偏移量,定义元素先对于父元素上边线的距离 bottom:底部偏移量,定义元素先对于父元素下边线的距离 left:左部偏移量,定义元素先对于父元素左边线的距离 right:右部偏移量,定义元素先对于父元素右边线的距离2.定位模式
position属性的常用值
static:自动定位(默认定位方式)唯一的用处就是用来取消定位。 relative:相对定位,相对元素本身的位置进行定位,相对定位不脱离自己原来的文档流,移动的位置是以自己左上角为基点来移动的
相对定位css
相对定位效果
absolute:绝对定位,相对于它上一个已经定位的祖先元素进行定位,如果所有祖先元素都没有定位就以当前屏幕进行定位。如果子元素想在父元素上定位而父元素不想挪动位置,那么就为父元素设置相对定位且父元素的top和left为0。(自绝父相)
绝对定位css
绝对定位效果
fixd:固定定位,相对于浏览器窗口进行定位,脱离原来的文档流
固定定位css
固定定位效果
注:加了绝对定位和固定定位之后元素模式也会跟着变化,转为行内块。(行内块的宽度和高度跟内容有关)
z-index
想要调整层叠元素的堆叠顺序时可以使用z-index属性来设置层叠顺序
z-index的默认值是0,取值越大元素的层叠顺序约靠上如果同样的值则根据文档顺序,后来者居上值之能是数值,不能加单位
没设置index之前
设置index之后
设置方法
举报/反馈

现在学前端不晚

2获赞 5粉丝
一个前端小白学习道路上的笔记分享~
关注
0
0
收藏
分享