posion定位属性
Position
Static:
该元素根据文档的正常流程进行定位。顶部、右、底部、左和z- index属性都没有影响。这是默认值。
Relative:元素根据文档的正常流程进行定位,然后根据顶部、右、底部和左侧的值对其进行偏移。偏移量不影响任何其他元素的位置;因此,页面布局中元素的空间与位置是静态的一样。当z- index的值不是自动的时候,这个值就会创建一个新的叠加上下文。它对表组、表行、表列、表格单元和表标题元素的影响是未定义的。
Absolute:
元素从正常的文档流中删除,并且没有为页面布局中的元素创建空间。它的位置相对于它最接近的位置,如果有的话;否则,它是相对于初始包含块的。它的最终位置是由上、右、下和左的值决定的。当z- index的值不是auto的时候,这个值就会创建一个新的叠加(栈堆)上下文。绝对定位的盒子的边缘不会随着其他的边缘而倒塌。
Fixed:
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。元素从正常的文档流中删除,并且没有为页面布局中的元素创建空间。它的定位相对于viewport建立的初始包含块,除非它的一个祖先有一个转换、透视或过滤属性集到除none之外的其他东西(参见CSS转换规范),在这种情况下,祖先的行为就像包含块一样。(注意,浏览器与透视图和过滤器之间存在不一致,有助于包含块的形成。)它的最终位置是由上,右,下,左,决定,这个值总是创建一个新的叠加上下文。在打印文档中,元素被放置在每个页面的相同位置。
Sticky:
该元素根据文档的正常流程进行定位,然后相对于其最近的滚动祖先和包含块(最近的块级祖先),包括与表相关的元素,基于顶部、右、底部和左侧的值进行偏移。偏移量不会影响任何其他元素的位置。这个值总是创建一个新的叠加上下文。注意,一个粘性元素“粘”到它的最近的祖先,它有一个“滚动机制”(当溢出被隐藏、滚动、自动或覆盖时创建),即使那个祖先不是最近的滚动的祖先。这有效地抑制了任何“粘性”行为
出处:https://www.cnblogs.com/yyqxlcx/
转载于:https://www.cnblogs.com/jsunny/p/9819730.html
posion定位属性相关推荐
- CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 ...
- css怎么使元素绝对定位有过度效果_CSS定位属性Position实例分析
CSS所提供的Position定位属性在进行网页页面布局过程中非常重要,通过使用Position定位属性可以实现对页面元素进行精确定位,最终达到较好的设计及页面展示效果.本文主要针对Position属 ...
- html定位的所有属性,HTML CSS定位属性详解 嘿嘿嘿
定位属性:Position 作用:检索或者设置元素的定位方式"(改变元素位置) 定位的步骤: 1.给元素添加position属性 证明该元素要做位置变 2.确定参照物!(通过position ...
- (18)css常用样式—定位属性
一.定位属性position 前面我们已经了解过布局相关的盒模型.浮动等属性,而定位是另一种布局的重要属性,常用于制作压盖或者位置相关的效果. 属性名:position 属性值:relative 相对 ...
- 关于div的定位属性问题
div 的定位属性设置为 fixed 在IE 或360浏览器上 若不设置top属性是不会出现 固定效果的 转载于:https://blog.51cto.com/zzqnobody/1624809
- CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
- html的定位属性,CSS之定位属性
一,定位介绍 定位的基本思想很简单,它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的. 二,定位类别 1.相对定位相对定位就是相对于自己以前在 ...
- 08-CSS属性:定位属性
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
最新文章
- python 空指针_Python ctypes模块:扩展指针数组时进行NULL指针访问
- LeetCode 462. 最少移动次数使数组元素相等 II(数学)
- Q-学习,马克尔决策过程:强化学习
- 信奥中的数学:二次互反律
- python免费ocr软件_实用工具 | 6款免费OCR神器,总有一款适合你!
- web压力测试的几个指标
- 95社区(对接第三方社区)
- 《朗读者》中那些让人受益终生的句子
- ECharts为X轴Y轴添加单位
- Springboot-banner图-定制化
- JPBC库应用之BLS签名
- 资产负债及银行资产负债业务
- 笔记三、最大数字(C++)
- JDK+JAVA+TOMCAT+MAVEN+IDEA的安装配置以及新建项目
- window10家庭版安装docker记录
- jquery判断日期格式
- K660E I7 D4 clover 引导黑苹果完美驱动
- Android基于高德SDK的开发——自定义地图主题样式(悬浮按钮+底部弹窗)
- netsh端口映射与端口转发
- 水星路由器wan口ip显示0_路由器WAN口获取不到IP地址怎么办?
热门文章
- c#treeview选中节点
- 自己的秋招春招经历,现在的发展情况
- AM在人力资源管理系统升级中的应用研究
- openshift java_在OpenShift上部署Java应用程序的快速指南
- Linux:权限管理
- 如何关闭139端口及445端口等危险端
- 为杭州地铁“增光”,鸿雁被评为“杭州地铁2022年度优秀供应商”
- 1225: Little Lover
- “Hello World!”团队第六周的第二次会议
- 太不可思议了,AI竟然学会了重男轻女