"position" 是一个用于设置元素定位方式的 CSS 样式。它可以将元素相对于文档的某个位置进行定位,常用于制作浮动菜单、固定头部和底部等效果。
css语法如下:
position: static | relative | absolute | fixed | sticky;
各个取值的含义如下:
static:元素在文档流中正常排列,默认值。
relative:元素相对于自身的位置进行定位。
absolute:元素相对于其最近的已定位祖先元素进行定位,如果不存在已定位祖先元素,则相对于 body 元素进行定位。
fixed:元素相对于视口进行定位,不会随页面滚动而改变位置。
sticky:元素先相对于文档流进行定位,然后相对于视口进行定位,当页面滚动到元素所在区域时,元素将固定在视口中指定的位置。
例如,以下样式将 div 元素的定位方式设置为相对定位:
div {
position: relative;
top: 50px;
left: 100px;
}
该样式会将 div 元素向下移动 50px,向右移动 100px,因为相对定位是基于元素自身的位置进行定位的。
又如,以下样式将 div 元素的定位方式设置为固定定位:
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
该样式会将 div 元素固定在页面的左上角,并且不会随页面滚动而改变位置,常用于制作固定的导航栏、侧边栏等效果。