css 定位
2020-12-23 本文已影响0人
占星_fc3b
一、position属性
1.position-static
静态定位、常规定位、自然定位
作用:使元素定位于常规、自然流中
(块、行垂直排列下去、行内水平从左到右)
特点:
忽略top bottom left right 或者 z-index 声明。
两个相邻的元素如果都设置了外边距,那么最终外边距等于两者外边距中最大的。
具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中
2.position-relative
相对定位
作用:
使元素成为可定位的祖先元素
特点:
可以使用 top right botton left z-index进行相对定位
相对定位的元素不会离开常规流
任何元素都可以设置relative,他的绝对定位的后代都可以相对于他进行绝对定位
可以使浮动元素发生偏移,并控制他们的堆叠顺序
3.position-absolute
绝对定位
作用:使元素脱离常规流
特点:
脱离常规流
设置尺寸要注意:百分比比的是最近定位祖先元素
如果没有最近的祖先元素,会默认为body为祖先元素
上下左右如果设置为0,它将对齐到最近定位祖先元素的各一边---衍生出一个居中秒计
上下左右如果设置为auto 它将被打回原形
z-index可以控制堆叠顺序
4.position-fixed
固定定位
固定定位相对于视觉窗口做定位。
固定定位元素不会随着视口滚动而滚动
5.position-sticky
磁贴定位 粘性定位 吸附定位
作用:relavtive与fixed的完美结合,制造出吸附效果
特点:
如果发生偏移,原位置还是会在常规流中
如果它的最近祖先元素有滚动 那么他的偏移标尺就是最近的祖先元素
如果最近的祖先元素没有滚动 那么他的偏移标尺是视口
上下左右的偏移规则