position 的值, relative 和 absolute 分别是相对于谁进行定位的?
relative: 相对定位
相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置。原来在标准流中的位置继续占有。
absolute: 绝对定位
相对于最近一级定位不为static的父元素进行定位。(子决父相)。
fixed: (老版本IE不支持)固定定位
相对于浏览器窗口或者frame进行定位 跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。
static: 默认值,没有定位
元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移几乎不用。
position: sticky; 基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
position 的值, relative 和 absolute 分别是相对于谁进行定位的?的更多相关文章
- 关于position的relative和absolute分别是相对于谁进行定位的
position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始 ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- CSS的position属性:relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- 一张图看懂css的position里的relative和absolute的区别
position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
- CSS里Postion几个取值relative、absolute、static、fixed的区别和用法
---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- position 有五个值:static、relative、absolute、fixed、inherit。
position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
- 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?
display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...
- position 的值absolute、fixed、relative和static的定位原点是什么
position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...
随机推荐
- zabbix snmp OID 列表
系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...
- springboot踩坑&问题记录
常见错误 莫名其妙 classes/:na 前往查看.yml 的配置问题 2.驼峰命名 是因为又用了xml配置,又在yml配置文件中用了mybatis的configuration配置,两个冲突了,不是 ...
- 微信小程序 BLE 基础业务接口封装
写在前面:本文所述未必符合当前最新情形(包括蓝牙技术发展.微信小程序接口迭代等). 微信小程序为蓝牙操作提供了很多接口,但在实际开发过程中,会发现隐藏了不少坑.目前主流蓝牙应用都是基于低功耗蓝牙(BL ...
- C++ 项目目录结构
目录结构 project_root/ ├── bin/ # 可执行文件目录 │ ├── my_app # 可执行文件 │ └── ... # 其他可执行文件或脚本 │ ├── build/ # 编译产 ...
- Python if __name__ == "__main__" 解释
一种机制,允许脚本以不同的方式运行,这取决于作为独立的程序执行还是作为模块被其他脚本导入.这种机制就是 if __name == "__main__" 其作用是控制某些代码块只在该 ...
- HarmonyOS NEXT未成年人模式无缝联动所有应用,过滤非适龄内容
背景 随着消费电子产品和移动互联网的普及,未成年人互联网普及率96.8%,超过80%的未成年人都拥有自己的上网设备,而如何引导孩子正确上网一直是家长们的担忧.市场上很多电子设备.系统推出了一些未成年人 ...
- Allen基因图谱:python Aabgen的安装
1. abagen 使用教程的官方链接:abagen: A toolbox for the Allen Brain Atlas genetics data - abagen 0.1.3-doc+0.g ...
- 性能、成本与 POSIX 兼容性比较: JuiceFS vs EFS vs FSx for Lustre
JuiceFS 是一款为云环境设计的分布式高性能文件系统.Amazon EFS 易于使用且可伸缩,适用于多种应用.Amazon FSx for Lustre 则是面向处理快速和大规模数据工作负载的高性 ...
- 【LLM训练系列】从零开始训练大模型之Phi2-mini-Chinese项目解读
一.前言 本文主要是在复现和实践Phi2-mini-Chinese后,简要分析下Phi2-mini-Chinese这个项目,做一个学习实战总结. 原文发布于知乎:https://zhuanlan.zh ...
- git 回退之前某次提交
git 版本回退,用于误提交或者版本回退 一.回滚到之前的某次版本,且该版本后的提交都不要(用于版本回退) 1).首先查看版本号,用 git log 命令查看要回退的版本对应的commit Id co ...