position属性absolute与relative(转)
每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看。
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认 依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位, 位置将由TRBL决定。

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始 点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。
Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
position属性absolute与relative(转)的更多相关文章
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- position属性absolute和relative理解
relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...
- position属性absolute与relative 的区别
连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...
- CSS position属性---absolute与relative
详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
- 怕忘记了CSS中position的absolute和relative用法
CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- CSS中应用position的absolute和relative的属性制作浮动层
我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...
- 知识点摸清 - - position属性值之relative与absolute
两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
随机推荐
- 使用 Mockito 单元测试 – 教程
tanyuanji@126.com 版本历史 - - - - 使用 Mockito 进行测试 该教程主要讲解 Mockito 框架在Eclipse IDE 中的使用 目录 tanyuanji@12 ...
- XJOI网上同步训练DAY2 T2
[问题描述] 火车司机出秦川跳蚤国王下江南共价大爷游长沙.每个周末勤劳的共价大爷都会开车游历长沙市. 长沙市的交通线路可以抽象成为一个
- Qemu对x86静态内存布局的模拟
快乐虾 http://blog.csdn.net/lights_joy/ lights@hb165.com 本文适用于 QEMU-0.10.5 VS2008 欢迎转载,但请保留作者信息 在PC机中,由 ...
- 关于google的C++ coding style
大家都知道google的开源项目有很多,不过我观察过一些开源项目,觉得代码质量就是这家最好了.这些“教条”式规定的背后是是来自于常年工程经验积累上的理性思考. 为什么好?主要有以下几点: 1.规范,就 ...
- 【转】Android 源码下利用jni编译自己的项目(参考系统development/samples/SimpleJNI)
原文网址:http://blog.csdn.net/qiuxiaolong007/article/details/7860481 记于正文前:环境是ubuntu10.10,android 源码是2.0 ...
- 【czy系列赛】czy的后宫6 && bzoj1044 [HAOI2008]木棍分割
题目描述 众所周知的是丧尸czy有很多妹子(虽然很多但是质量不容乐观QAQ),今天czy把n个妹子排成一行来检阅.但是czy的妹子的质量实在--所以czy看不下去了.检阅了第i个妹子会增加czy a[ ...
- php用apc实现的临界区 解决并发,资源互斥同步访问
在面对线程或进程的互斥同步的控制问题时,常用的解决办法是:临界区,互斥锁,信号量 临界区保证在某一时刻只有一个线程能够访问到所需资源的方法. 任何时候,只能至多有一个线程处于临界区中.如果多个线程要求 ...
- SQL生成随机字符串
1.SQLserve生成随机字符串 SELECT replace(newid(), '-', '')
- 详述.NET里class和struct的异同
结构与类共享几乎所有相同的语法,但结构比类受到的限制更多:尽管结构的静态字段可以初始化,结构实例字段声明还是不能使用初始值设定项. 结构不能声明默认构造函数(没有参数的构造函数)或析构函数. 结构的副 ...
- C#基于UDP实现的P2P语音聊天工具(1)
这篇文章主要是一个应用,使用udp传送语音和文本等信息.在这个系统中没有服务端和客户端,相互通讯都是直接相互联系的.能够很好的实现效果. 语音获取 要想发送语音信息,首先得获取语音,这里有几种方法,一 ...