css中定位方式

一、静态定位(static):

元素的默认定位方式,元素按照正常文档流排列。

left、top、right、bottom等属性对该元素无效,不会受到定位属性的影响。

二、相对定位(relative):

通过设置元素的position属性为relative,元素在正常文档流中占据原先的空间,但可以通过left、top、right、bottom等属性相对于自身的初始位置进行偏移。

javascript 复制代码
div {
    position: relative;
    left: 20px;
    top: 10px;
}

三、绝对对定位(absolute):

通过设置元素的position属性为absolute,元素脱离正常文档流,相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始坐标进行定位。同样可以使用top、right、bottom和left属性来调整元素的位置。

javascript 复制代码
div {
    position: absolute;
    left: 20px;
    top: 10px;
}

四、固定定位(fixed):

通过设置元素的position属性为fixed,元素脱离正常文档流,相对于浏览器窗口进行定位。无论页面滚动与否,元素的位置都不会改变。left、top、right、bottom等属性可以用来指定元素相对于窗口的偏移量。

javascript 复制代码
div {
    position: fixed;
    left: 20px;
    top: 10px;
}

五、粘性定位(sticky):

通过设置元素的position属性为sticky,可以实现元素在特定的滚动区域内粘性定位。元素在滚动到指定位置前是相对定位,滚动到指定位置后则固定在指定位置,直到滚动区域滚动超过指定位置。

相关推荐
YGY_Webgis糕手之路几秒前
OpenLayers 综合案例-轨迹回放
前端·gis
YGY_Webgis糕手之路1 分钟前
OpenLayers 综合案例-地图绘制
前端·gis
鹏程十八少2 分钟前
5. Android UI动效新标杆:灵动岛动画,动效深度体验!
前端
iaku2 分钟前
🔥React工程化实践:构建企业级可维护应用架构
前端·react.js·前端框架
鸡米键盘2 分钟前
用 ts-results 改善JS/TS错误处理,告别“吞错误”
前端·javascript
LsimpleY3 分钟前
里程碑四与五:基于 vue 动态组件库建设与抽象封装并发布npm包
前端
天才熊猫君8 分钟前
验证跨域 cookie 的坑
前端
贝加尔湖Pan11 分钟前
实战经验
前端
kele_z16 分钟前
Element-UI实现跨页勾选
前端·javascript
程序视点37 分钟前
Umi-OCR完全指南:开源离线OCR识别软件下载安装使用教程|支持批量PDF/二维码识别
前端·后端·github