position:
static 静态(默认、非定位元素)
relative 相对(定位元素)
absolute 绝对(定位元素)
fixed 固定(定位元素)
sticky 粘滞(定位元素)
定位元素的特点: 可以使用定位规则 " top right bottom left "
1.position: static;
HTML 元素默认情况下的定位方式为 static(静态)。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位。
2.position: relative;
不脱离文档流,
相对于它原来所在位置移动。
3.position: absolute;
脱离文档流,
相对于距离它最近的父定位元素位置移动。如果所有的父元素都不是定位元素,相对于浏览器视口位置移动。
一般情况下,绝对定位元素应该嵌套在相对定位元素内容来使用
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
4.position: fixed;
position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
5.position: sticky;
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如 position:fixed)。