【position的五个值】static、relative、absolute、fixed、sticky
static
/* 默认值*/
.box{
position: static;
}
- 正常文档流
- css默认布局方式
relative
/* 相对定位*/
.box{
position: relative;
left: 20px;
top: 20px;
}
- 元素所占空间还保留在原位(其他元素不会挤占他原本的空间)
- 通过left、right、top、bottom来设置位置的偏移(相对元素的默认位置偏移)
absolute
/* 绝对定位*/
.box {
position: absolute;
}
- 脱离正常文档流(后面元素可以挤占他的空间)
- 元素存在在挤占他空间的元素的上层(同时有两个定义了absolute属性的同级元素,后定义的覆盖在先定义的上层)
- 可通过left、right、top、bottom来设置位置的偏移,偏移的值是相对包含他的元素的边框位置来计算的
- 这个包含他的元素指:离他最近的有定位的元素(设置了
position
除static值、transform
、perspective
这些属性),如果没有就一直向上找,直到body元素 - 通常给父级设置
relative
定位,因为不会影响正常的文档流
fixed
/* 固定定位*/
.box {
position: fixed;
}
- 脱离正常文档流
- 偏移量是相对当前窗口计算的
- 设置好偏移之后,无论页面怎么滚动,都会被固定在同一位置
- 适合用于固定浮窗、导航条
absolute
和 fixed
这种脱离正常文档流的定位方式
- 使行内元素可设置宽高
- 使块级元素在未设置宽高时,把元素的宽高设置成内容的宽高
- 设置
left: 0;
right: 0;
使宽度占满包含容器、top: 0;
bottom: 0;
使高度占满包含容器
sticky
/* 粘性定位*/
.box {
position: sticky;
}
- 相当于
relative
和fixed
的结合 - 可以让元素在距离浏览器窗口一定位置时把它固定在这个位置,其它情况下还在正常的文档流中
z-index: ;
: 设置 z-index 可以改变元素的覆盖关系,值越大越在上面。