理解position 绝对定位和相对定位
一、position的三种取值
1、取值
Position : static / absolute / fixed / relative
static:静态 absolute:绝对定位 fixed:固定 relative:相对定位
默认情况下:static 无特殊定位,对象遵循HTML定位规则
| absolute : | 将对象从文档流中抽出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。 |
| relative : | 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 |
| fixed : | E5.5及NS6尚不支持此 |
2、理解relative和absolute取值
(1)relative
不脱离文档流、对象不能重叠、依据left;right;top;bottom(四个至少有一个存在具体的值)等属性在正常文档流中偏移自身位置(换言之,相对于自己定位的)
(2)absolute
脱离文档流、然后使用left;right;top;bottom(四个至少有一个存在具体的值)等属性相对与其最接近的一个最有定位设置的父级对象进行绝对定位,如果父级对象没有设置定位属性,那么将遵循HTML的定位规,以body的左上角为参考进行定位、
绝对定位的对象可以重叠,层叠的顺序可以通过z-index属性进行控制,大的在上面
二、relative和absolute的区别
1、是否完全脱离了文档流
2、relative是相对于自己进行偏移定位,absolute是相对于最近具有定位设置的父级对象进行绝对定位
3、对象是否能重叠的问题(z-index改变层级关系)
【题外话】最近定位用的挺多的,例如导航菜单为了有点效果,通过相对定位让它看起来有点特别,还有一些效果,对联式的广告悬浮框、还有回到顶部等。不错不错,good good study,daydayup!
理解position 绝对定位和相对定位的更多相关文章
- css position 绝对定位和相对定位
position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...
- html 之 position 绝对定位与相对定位(待补充)
相对定位:对于区块标签而言,占着原有的空间 绝对定位:对于网页而言,不占原来的空间
- 关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)
关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录) 作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...
- HTML基础--position 绝对定位 相对定位 锚点链接
position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- List<>.Contains<>的用法
List<Plan> Plans = new List<Plan>();//存放服务器中的当前用户所接受的项目计划列表. //Plan 类包含PlanID等属性. if (Pl ...
- 十分钟了解MVVMLight
十分钟了解MVVMLight 前言: 最近看了看开源框架MVVMLight,一直想写一点笔记,但是文笔欠佳,索性就放弃了.那就来翻译一点文章吧. 由于英文水平和技术水平有限,凡是不妥之处,请大家指 ...
- c++11的for新用法 (重新练习一下for_each)
看到手册的代码里面有个for的很奇怪的用法,用了一把 http://www.cplusplus.com/reference/unordered_set/unordered_set/insert/ ...
- 学习TextKit框架(上)
TextKit简介 在iOS7之前我们要实现图文混排要使用CoreText,iOS6时有了Attribute string 可以解决一些简单的富文本需求.直到iOS7 苹果推出了TextKit,Tex ...
- 【XCode7+iOS9】http网路连接请求、MKPinAnnotationView自定义图片和BitCode相关错误--备用
更新了iOS9和XCode7,之后,Swift变成了2.0,有了新的语法习惯,iOS也加强了安全方面的限制.我们原本的项目就会出现不少问题.先来看我之前的项目中出现的3个错误吧和相关的解决办法吧. 1 ...
- C# RichTextBox 获取当前显示部分的文字
int start = richTextBox1.GetCharIndexFromPosition(new Point(0, 0)); int end = richTextBox1.GetCharIn ...
- 解决ubuntu侧边栏固定应用单击无反应的问题
Linux下有些绿色软件,不需要安装就可以双击启动,但有些程序在打开后直接在 Launcher 中右键选择 Lock to Launcher ,但是,有时候单击图标后并未启动应用,下面给出解决方法. ...
- C语言中.h和.c文件解析(很精彩)
C语言中.h和.c文件解析(很精彩) 简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析 ...
- Python零散收集:
Python零散收集 转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \’ 单引号 \” 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵 ...
- Kaggle Competition Past Solutions
Kaggle Competition Past Solutions We learn more from code, and from great code. Not necessarily alwa ...