深入理解及应用Position
时间:2022-04-22
本文章向大家介绍深入理解及应用Position,主要内容包括脱离文档流、对 Width、height的影响、定位后的默认位置、他与z-index无解的关系、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
position俗称定位,主要取值及作用如下:
static |
默认值。没有定位,出现在正常文档流中 |
---|---|
absolute |
绝对定位,相对于position为absolute、relative、fixed的第一个父元素进行定位 |
relative |
相对定位,相对于其正常位置进行定位 |
fixed |
绝对定位,相对于浏览器窗口进行定位 |
Position本不复杂,混淆应用比较难理解,主要规则如下:
脱离文档流
除 static属性值之外,其他值都会使元素脱离文档流(float也会导致元素脱离文档流)。
对 Width、height的影响
1) Absolute的参考点为最近可作为参考点的父元素(position为absolute、relative、fixed的元素)、fixed的参考点浏览器窗口、relative的参考点为元素正常位置。
2) 元素本身值为inherit时
a) 当父级元素的Width和height值为数值时,元素继承父级元素的完整高度,并以最近参考点作为参考。
.wrap{
position: relative;
width: 500px;
height: 300px;
border: 1px solid red;
}
.cont{
background: gray;
width: 150px;
overflow: hidden;
}
.txt{
background: yellow;
width: 230px;
height: inherit;
}
.banner{
background: pink;
width: 50%;
height: inherit;
}
.txt-cont{
position: absolute;
background: darkblue;
width: inherit;
color: white;
}
<div class="wrap">
<div class="cont">
cont
<div class="txt">
txtxtxt
<div class="txt-cont">
txt-cont
</div>
</div>
<div class="banner">
banner
</div>
</div>
</div>
b) 当父级元素的Width和height值为百分比时,以参考点元素的宽、高* 百分比来计算。
.wrap{
position: relative;
width: 500px;
height: 300px;
border: 1px solid red;
}
.cont{
background: gray;
width: 150px;
overflow: hidden;
}
.txt{
background: yellow;
width: 50%;
height: inherit;
}
.banner{
background: pink;
width: 50%;
height: inherit;
}
.txt-cont{
position: absolute;
background: darkblue;
width: inherit;
color: white;
}
<div class="wrap">
<div class="cont">
cont
<div class="txt">
txt
<div class="txt-cont">
txt-cont
</div>
</div>
<div class="banner">
banner
</div>
</div>
</div>
3) 元素本身为百分比时(50%)
此种情况下,无论父级元素的width和height是数值,还是百分比都不会造成对元素自身的影响,元素自身还是会以参考进行相应的计算。
.wrap{
position: relative;
width: 500px;
height: 300px;
border: 1px solid red;
}
.cont{
background: gray;
width: 150px;
overflow: hidden;
}
.txt{
background: yellow;
width: 50%;
height: inherit;
}
.banner{
background: pink;
width: 50%;
height: inherit;
}
.txt-cont{
position: absolute;
background: darkblue;
width: 100%;
color: white;
}
<div class="wrap">
<div class="cont">
cont
<div class="txt">
txt
<div class="txt-cont">
txt-cont
</div>
</div>
<div class="banner">
banner
</div>
</div>
</div>
定位后的默认位置
Fixed和absolute属性后的默认位置都是在原地,只是紧跟后面折正常文档流元素会顶上来,被定位元素盖住。
他与z-index无解的关系
z-index的详细介绍见后面章节,此处只指出position除static值外都会创建层叠上下文(z-index不为auto的时候)。
1) z-index为数值时,会创建层叠上下文,子元素层叠顺序以此做为参考。
2) z-index为auto时,不会创建层叠上下文,层叠顺序与z-index:0一致。
- Golang语言社区--【基础知识】语言数组
- HDUOJ1086You can Solve a Geometry Problem too
- Golang语言社区--【基础知识】常量
- HDUOJ------1058 Humble Numbers
- MySQL偏移量的一点分析
- HDUOJ------------1051Wooden Sticks
- HDUOJ-----2068RPG的错排
- MySQL创建表失败的问题
- HDUOJ-----1066Last non-zero Digit in N!
- Golang语言社区-【基础知识】切片
- Oracle和MySQL的高可用方案对比(一)
- golang取两个数字之间的随机数
- MySQL 5.5复制升级到5.7的一点简单尝试
- go语言读取CSV文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 7.0开发获取存储设备信息的方法
- Android中默认系统的声音/大小修改和配置详解
- Android开发中计算器的sin、cos及tan值计算问题分析
- Android开发实现绘制淘宝收益图折线效果示例
- Android自定义View实现搜索框(SearchView)功能
- android 监听SD卡文件变化的实现代码
- Android监听手机短信的示例代码
- Android开发之图片压缩工具类完整实例
- Android6.0开发中屏幕旋转原理与流程分析
- Android中WebView的基本配置与填坑记录大全
- Android开发实现ListView异步加载数据的方法详解
- Android开发实现AlertDialog中View的控件设置监听功能分析
- 详解Android 语音播报实现方案(无SDK)
- Android实现中轴旋转特效 Android制作别样的图片浏览器
- Android使用DrawerLayout实现双向侧滑菜单