相对、绝对、固定定位,以及其层级关系和脱离文档流的影响
来源:互联网 发布:985 211文件失效 知乎 编辑:程序博客网 时间:2024/05/21 11:30
定位:一般父级用相对定位,子级用绝对定位
1.相对定位:position:relative
2.绝对定位:position:absolute
3.固定定位:position:fixed
默认static没有定位
偏移量:left和
top比
right和
bottom的优先级要高
相对定位:
相对于自身原始位置进行定位
原点在自身左上角
不脱离文档流
特性:
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位:
以定位父级为原点进行定位
会脱离文档流
如果没有定位父级以document文档定位
温馨提示:绝对定位即使没有初始值,也一定要设置值
left:0px;top:0px;
特性:
1.会使元素完全脱离文档
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
5.绝对定位要和相对定位配合使用
6.如果有定位父级,针对定位父级发生偏移
如果没有,针对document进行偏移
7.如果绝对定位的子级有浮动,可以省略清浮动的操作
固定定位
以窗口左上角为原点定位,定位之后相对于窗口的位置始终不变
应用场景:悬浮在网页两边的广告
脱离文档流
温馨提示:IE6不支持固定定位
特性:
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动,可以省略清浮动的操作
脱离文档流的两点影响
1.后面同父级元素会顶上来
2.父级会检测不到脱离文档流的元素,从而导致父级高度无法由内容撑开
定位层级设置
z-index:数值
数值越大,层级越高
层级关系
z-index负数<正常<float(和文档同级)<position<z-index正数
注意:z-index、left、top、right、bottom只对带有position属性(static除外)的元素有效
z-index,用来提升或降低层级关系
阅读全文
0 0
- 相对、绝对、固定定位,以及其层级关系和脱离文档流的影响
- 绝对定位,相对定位和文档流的关系
- 相对定位和绝对定位以及固定定位
- 相对、绝对和固定定位的比较
- 普通文档流,定位(绝对,相对,固定),浮动
- css相对、绝对和固定定位
- h5的相对定位、绝对定位、固定定位以及案例练习
- CSS的定位(绝对定位 相对定位 固定定位)
- CSS的定位(绝对定位 相对定位 固定定位
- [zz]css绝对定位、相对定位和文档流的那些事
- css绝对定位、相对定位和文档流的那些事
- css绝对定位、相对定位和文档流的那些事
- css绝对定位、相对定位和文档流的那些事
- [zz]css绝对定位、相对定位和文档流的那些事
- [zz]css绝对定位、相对定位和文档流的那些事
- css绝对定位、相对定位和文档流的那些事
- css绝对定位、相对定位和文档流的那些事
- css绝对定位、相对定位和文档流的那些事(非本人)
- 间接寻址的基本及其应用(实验2.4)
- Java日期时间相关的类
- Hibernate一对多保存思考题
- #Java 核心技术卷一阅读笔记# 第十二章 Swing用户界面组件
- 实验二之静态链表
- 相对、绝对、固定定位,以及其层级关系和脱离文档流的影响
- asp.net如何使文本对齐方式为剧中
- 【UNP学习笔记】套接字地址相关函数
- 设计模式C++学习笔记之二(Proxy代理模式)
- [Java]从今天开始,每天记录一点点
- win64 python安装PIL出错
- java基本数据类型和数组
- ubuntu16.04用root用户登陆图形界面
- Go游戏服务器开发的一些思考(十六):IO游戏服务器架构