css定位的理解
在CSS中关于定位的内容是:position:relative | absolute | static | fixed
● static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
● relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
● absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
● fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级:z-index: auto | namber;
● auto 遵从其父对象的定位
● namber 无单位的整数值。可为负数
什么是文档流:
文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。
文本流是相对于文子段落
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。
但是绝对定位后,不仅元素盒子会拖出文档流,文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来,类似于一个图层的概念
下面为表格说明:
父级标签无position限定 | 父级标签用static限定 | 父级标签用fixed限定 | 父级标签用absolute限定 | 父级标签用relative限定 | |
fixed | 相对可视窗口 | 相对可视窗口 | 相对可视窗口 | 相对可视窗口 | 相对可视窗口 |
absolute | 相对body | 相对body | 相对body | 相对父级 | 相对父级 |
relative | 相对文本流定位(与父级有间接关系) | ||||
static |
相对父级定位 top等限定无效 |
相对父级定位 top等限定有效 |
相对父级定位 top等限定有效 |
相对父级定位 top等限定有效 |
相对父级定位 top等限定有效 |
z-index计算规则
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
层级关系的比较
1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。
2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。
3. IE6/7下position不为static,且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。
4. z-index为auto的元素不参与层级关系的比较,由向上遍历至此且z-index不为auto的元素来参与比较。
css定位的理解的更多相关文章
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
- CSS定位 深入理解定位(position)的偏移
前言 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定位到 ...
- css定位 与position
本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- CSS自学笔记(7):CSS定位
很多时候,我们需要对一些元素进行自定义排序.布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序.布局等操作,可以改变浏览器默认的死板的排序. CSS定位的功能很容易理解,它允 ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- 【CSS】 CSS 定位
css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...
- selenium之css定位小结
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...
- Selenium CSS定位语法
大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的定位 ...
随机推荐
- OC学习篇之---Foundation框架中的NSDirctionary类以及NSMutableDirctionary类
昨天学习了Foundation框架中NSArray类和NSMutableArray类:http://blog.csdn.net/jiangwei0910410003/article/details/4 ...
- Django中get()和fiter()的区别
QuerySet(查询结果集对象):从数据库中查询出来的结果一般是一个集合,这个集合叫做 QuerySet,也就是指服务器上的url里面的查询内容.Django会对查询返回的结果集QuerySet进行 ...
- 《ArcGIS Runtime SDK for .NET开发笔记》--在线编辑
介绍 ArcGIS可以发布具有编辑功能的Feature Service.利用Feature Service我们可以实现对数据的在线编辑. 数据制作参考: https://server.arcgis.c ...
- QC增加Test、Defect字段
QC--Tools--customization,在Project Entities中增加字段,在Project Lists中编辑Lookup List类型字段的指定值
- php函数的使用技巧
函数的使用技巧 1. do{...}while(false)的用法 作用:使用do{...}while(false)结构可以简化多级判断时代码的嵌套. 例子: 现在要实现一个功能,但需要A.B.C.D ...
- python 反转列表的3种方式
转载自:https://blog.csdn.net/bookaswine/article/details/42468735 方式一:使用reversed()函数 a=[1,2,3,4,5,6,7,8, ...
- Linux的文件访问权限及修改权限命令chmod
http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...
- processing模拟三角级数合成方波过程
代码 1: int radius = 2; 2: int[] accumys; 3: int times = 0; 4: 5: float scale = 1; 6: int origin = 400 ...
- Codeforces 388C Fox and Card Game (贪心博弈)
Codeforces Round #228 (Div. 1) 题目链接:C. Fox and Card Game Fox Ciel is playing a card game with her fr ...
- shell 读取配置文件的用法
https://blog.csdn.net/qq_36684665/article/details/81134179 亲测有用!