每次要用到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(转)的更多相关文章

  1. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  2. position属性absolute和relative理解

    relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...

  3. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  4. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  5. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  6. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  7. CSS中应用position的absolute和relative的属性制作浮动层

    我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...

  8. 知识点摸清 - - position属性值之relative与absolute

    两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...

  9. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. Learning Docker--chapter 1

    CONTENTS: (1) An introduction to Docker (2) Docker on Linux (3) Differentiating between containeriza ...

  2. 【转】android TV CTS 4.0.3_r1测试

    原文网址:http://blog.sina.com.cn/s/blog_539ad34301012764.html 做CTS测试已经一月有余,经过不断的摸索,现总结经验,与大家分享. 一.Downlo ...

  3. 快速批量导入庞大数据到SQL SERVER数据库(ADO.NET)

    原文地址:http://www.cnblogs.com/chenxizhang/archive/2008/11/11/1331060.html 如果你需要在程序中批量插入成千上万行的数据,你会怎么编写 ...

  4. Linux优化,history增加详细历史记录

    主要功能: 1, 可以记录哪个ip和时间(精确到秒)以及哪个用户,作了哪些命令 2,最大日志记录增加到4096条   把下面的代码直接粘贴到/etc/profile后面就可以了 #history mo ...

  5. 【转】PF_NETLINK应用实例NETLINK_KOBJECT_UEVENT具体实现--udev实现原理

    相对于linux来说,udev还是一个新事物.然而,尽管它03年才出现,尽管它很低调(J),但它无疑已经成为linux下不可或缺的组件了.udev是什么?它是如何实现的?最近研究Linux设备管理时, ...

  6. Oracle优化技术

    1.基本原理 Oracle的日志:Oracle中为了提高硬盘写的效率,採用内存中数据缓冲区来保存数据,等到一定量或一定时间后才写到磁盘(DBWR). 这个时候假如断电之类的故障发生,数据缓冲区的数据将 ...

  7. 密码算法详解——AES

    0 AES简介 1997年1月2号,美国国家标准技术研究所宣布希望征集一个安全性能更高的加密算法(AES)[3],用以取代DES.我们知道DES的密钥长度是64 bits,但实际加解密中使用的有效长度 ...

  8. IE下使用jquery ajax失效

    ie是根据请求的url是不是一样来是否发送请求,对于同一请求,ie只发送一次http请求,得到缓存之后就不再请求,所以同一请求发送多次,但ie实际是不会发送的 在你的第二次请求之前 使用 $.ajax ...

  9. Android 使用monkey自动测试

    很简单的一个monkey使用流程: 首先创建一个monkey脚本test.txt,例如一个简单的反复测试拍照功能的脚本: # Start of Script type= user count= 49 ...

  10. CGFloat和float

    CGFloat :在mac上自适应,在64位的系统,会变宽,32位会变窄,手机没变化float:没有变化