深入理解及应用Position
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一致。
深入理解及应用Position的更多相关文章
- 理解浮动和position定位
前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 理解浮动和position定位(转)
前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- 理解css之position属性
之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...
- 【物理/数学】概念的理解 —— pivot、position
0. 基本释义 pivot: n. 枢轴:中心点:旋转运动 vt. 以-为中心旋转:把-置于枢轴上 vi. 在枢轴上转动:随-转移 adj. 枢轴的:关键的 position: n. 位置,方位:职位 ...
- 理解CSS中position的各个值
static position的默认值,没有定位,元素在normal flow中: fixed 相对于浏览器左上角定位: relative 相对定位元素,其位置根据其在normal flow中的位置来 ...
- 转:深入理解css中position属性及z-index属性
原文链接:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种 ...
- 通过案例理解position:relative和position:absolute
w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...
随机推荐
- oracle 备份数据库对象(存储过程PROCEDURE,FUNCTION,VIEW,TRIGGER...)
开发过程中,需要不停的备份数据库对象, 特别是存储过程, 每次手动备份不免很低能啊 历经几次修改终于, 完美了,O(∩_∩)O哈哈~ (当然,你也可以再改简便一点~~~) select db ...
- Unknown lifecycle phase "mvn". You must specify a valid lifecycle phase or a goal in the format <plugin-prefix>:<goal> or <plugin-group-id>:<plugin-artifact-id>[:<plugin-version>]:<goal>
在用maven命令启动storm时候,命令行是:mvn exec:java -Dexec.mainClass="TopologyMain" -Dexec.args="sr ...
- YY一下淘宝商品模型
淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...
- LINQ系列:Linq to Object生成操作符
生成操作符从现有序列值中创建新的序列. 1. Empty Empty操作符返回一个指定类型的空集. 1>. 原型定义 public static IEnumerable<TResult& ...
- WPF DataGrid分页功能实现代码 修改原作者不能实现的部分
这两天需要给Datagrid加个分页,查找了一些相关的文章,发现有一个写了一个控件比较好,地址是 http://blog.csdn.net/zdw_wym/article/details/822189 ...
- windows8建立局域网的方法
win8建立局域网的方法:1.首先笔记本有无线网卡且支持 虚拟WIFI ;2.按win+X键,选择"命令提示符(管理员)A"; 3.输入"netsh wlan set h ...
- Android使用TextureView播放视频
1.引言 如果你想显示一段在线视频或者任意的数据流比如视频或者OpenGL 场景,你可以用android中的TextureView做到. 1).TextureView的兄弟SurfaceView 应用 ...
- 搭建SSH详细步骤及相关说明
因为手里已有相关jar,为方便我搭建的是:Struts2.0+Hibernate3.3+Spring3.0,数据库:MySQL 如果想搭建最新的,在官网上下载最新jar即可. 这里会对比MyEclip ...
- 1Z0-053 争议题目解析502
1Z0-053 争议题目解析502 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 502.A database is running In ARCHIVBXXMS mode. It ...
- Linux使用lvresize扩展或缩减lv大小
环境:CentOS 6.7 一.新建并挂载目录 /u01 和 /data 1.创建目录挂节点/u01,/data mkdir -p /{u01,data} 2.创建lv,名称是lv_u01,大小10g ...