position有哪些属性值

简介: position有哪些属性值

position 属性用于指定一个元素在文档中的定位方式。top、right、bottom 和 left 属性决定了该元素的最终位置。

static: 默认值,没有定位,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置,此属性下 top、right、bottom、left 和 z-index 属性无效。

relative相对定位:元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(此时会在此元素为添加定位时所在位置留下空白)。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。

absolute绝对定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,通过制定元素相对于最近的非static定位祖先元素的偏移,来确定元素位置,绝对定位可以设置外边距合并(margin),并且不会与其他边距合并。

fixed固定定位:元素的位置在屏幕滚动时不会发生改变位置。

sticky (黏性定位,吸顶效果):设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

相关文章
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
563 0
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
176 3
|
JavaScript
TypeScript中模块的导入与导出技术详解
【4月更文挑战第23天】TypeScript模块化通过`export`和`import`实现代码组织。导出包括变量、函数、类、接口,支持命名导出和默认导出。导入时,命名导出使用花括号指定成员,默认导出直接引用,还可使用`as`重命名。模块机制促进代码复用、解耦,提升可维护性。理解并运用这些技术对构建大型应用至关重要。
|
移动开发 前端开发 iOS开发
记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端H5的复制功能在ios端的兼容性问题
1245 0
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
529 0
|
7月前
|
存储 NoSQL 关系型数据库
微服务——MongoDB简介和体系结构
MongoDB是一种开源、高性能的文档型数据库,采用无模式设计,数据结构灵活,以类似JSON的BSON格式存储。它将记录作为文档,由字段和值对组成,支持复杂数据类型及嵌套结构。相比MySQL,MongoDB去除了传统表结构,使用集合(Collection)存储文档,适合处理非结构化和半结构化数据,简化开发并提升扩展性。其架构更灵活,适用于高并发和大数据场景。
444 0
|
JavaScript
成功解决:_vm.Login is not a function
这篇文章解释了在Vue.js应用中遇到"_vm.Login is not a function_"错误的原因,通常是因为尝试调用的_login_函数没有在当前组件的方法中定义。解决这个问题的方法是确保_login_函数在组件的方法对象中定义,并可以正确调用,同时检查函数名的拼写和调用语法是否正确。
|
机器学习/深度学习 数据采集 算法
基于机器学习的推荐算法构建技术详解
【6月更文挑战第4天】本文详述了构建基于机器学习的推荐算法,特别是协同过滤方法。从用户和物品相似性的角度,解释了用户-用户和物品-物品协同过滤的工作原理。涵盖了数据准备、预处理、特征工程、模型训练、评估优化及结果展示的构建流程。推荐算法在电商、视频和音乐平台广泛应用,未来将受益于大数据和AI技术的进步,提供更智能的推荐服务。
|
SQL Oracle 关系型数据库
NVL() 函数:SQL中的空值处理利器
【8月更文挑战第31天】
1708 0
|
12月前
|
存储 安全 API
12种最基本Web API:开发者的必学清单⭐
这些Web API 为创建高度互动和用户友好的网页应用开辟了无限可能。从存储和支付到地理位置和图形,掌握这些 API 可以提升您的Web开发技能。
553 2