static的取值有static、absolute、relative、fixed、sticky
html中元素的默认position的值为static,
static(html默认的定位方式)
会随着html的排版(flow)移动。static元素对top
、left
、right
、bottom
设定值不会生效
absolute(绝对定位)
absolute元素不会随着html排版的流程移动,但是会随着滚动条移动
。
absolute元素会根据外部的元素进行定位
top
、left
、right
、bottom
设定值作为它的元素位置。
relative(相对定位)
会随着html的排版(flow)移动。relative元素对top
、left
、right
、bottom
设定值会生效,因此可以通过这四个属性调整位置,与static有点像但多了通过top等进行调整位置。
在relative元素内的absolute元素会根据relative进行定位
fixed(固定定位)
fixed元素会固定在页面的固定位置,不会随着滚动条滚动移动。
如果fixed元素设定了top
、left
、right
、bottom
。即使在relative内,依然会根据body进行定位,不会根据relative元素进行定位
sticky
sticky元素会随着页面滚动,但sticky元素可以吸附在屏幕顶部
.sticky{
position:sticky;
top:0;
/*
0是吸附到顶部,也就是这个是触发条件,
如果设定为20px,则会在该元素顶部与该元素的位置为20px时会固定在改位置
*/
}