css中的定位
css中有三种基本的定位机制:普通流、浮动流、定位流
1、普通流:上下排列的布局 (大部分情况)
2、浮动流:左右排列的布局 (大部分情况)
3、定位流:层叠(叠加)排列布局(大部分情况)
定位属性
position:检索或设置对象的定位方法
static :默认值,没有定位,可以用于取消元素之间的定位设置
relative:相对定位(参照物是自身所在的位置)
如果没有定义偏移量,对元素本身没有任何影响
不使元素脱离文档流,空间是会保留
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移,不能独自存在,必须配合定位元素进行使用
absolute:绝对定位(参照物:包含块-该元素的祖先级元素)
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联属性)
如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
注:如果祖先元素中有多个元素具备定位属性,那么是以离自己最近的祖先元素进行偏移
注:默认情况下是相对于可视窗口进行定位的。
包含块:包含块是绝对定位的基础
绝对定位元素会根据包含块进行绝对定位,默认情况下,浏览器的可视窗口是一个大的包含块,默认情况下,绝对定位元素会相对浏览器的可视窗口进行定位;如果他的祖先级元素定义里包含块,那他就最近的祖先级元素进行绝对定位。
如何给祖先级元素定义成包含块:给祖先级元素添加position:relative/absolute/fixed。
绝对定位和相对定位的区别
1、相对定位的参照物是自己本身所在的位置,绝对定位的参照物是包含块
2、相对定位是不会脱离文档流的,而且不会对页面的布局产生影响;绝对定位是会脱离文档流的,之前的位置就不再占用,后面的内容会把位置补上去
z-index:auto/ number 检索或设置对象的层叠顺序
auto:默认值
number:无单位的整数值。可为负数
没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上
注:他只针对具有定位属性的元素起作用
fixed:固定定位(参照物:始终都是相对于整个浏览器窗口进行固定定位的)
使元素完全脱离文档流
是内联元素支持宽高(让内联具备内联块属性)
使块元素默认宽根据内容决定(让内联具备内联块属性)
相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响,不会受到祖先元素的影响
sticky 黏性定位
在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。
只支持top和left方向
设置了sticky的元素,在屏幕范围时该元素的位置并不受定位影响(设置top、left等属性无效),当该元素的位置将要移出偏移范文时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。