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:对象遵循 ...
随机推荐
- LeetCode_Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- DEVExpress For WPF 中GridControl如何实现滚动分页(延迟查询)
在显示大量数据时一般采用分页显示,但是最近用户需要滚动显示,那么问题来了,滚动显示要求将数据全部查询回来,这显然会导致显示速度很慢. 好在想到一种方式,就是当用户滚动鼓动条的时候再查询下面的数据.好吧 ...
- Oracle ORA-03137: TTC protocol internal error : [12333] 故障分析
程序通过JDBC 连接数据库异常,报 ORA-03137[12333]的错误. 当前程序的JDBC 驱动版本:ojdbc16-11.2.0.1.0.jar 数据库版本: 11.2.0.3 一. Log ...
- poj 2481 Cows(数状数组 或 线段树)
题意:对于两个区间,[si,ei] 和 [sj,ej],若 si <= sj and ei >= ej and ei - si > ej - sj 则说明区间 [si,ei] 比 [ ...
- Spring MVC基础
1.Web MVC基础 MVC的本质是表现层模式,我们以视图模型为中心,将视图和控制器分离出来.就如同分层模式一样,我们以业务逻辑为中心,把表现层和数据访问层代码分离出来是一样的方法.框架只能在技术层 ...
- python学习之路-7 模块configparser/xml/shutil/subprocess以及面向对象初级入门
本篇记录内容 模块 configparser xml shutil subprocess 面向对象 面向对象基础 面向对象编程和函数式编程对比 面向对象中对象和类的关系 面向对象之构造方法 面向对象之 ...
- EffectiveC#7--选择恒定的原子值类型数据
1.恒定类型就是一但它们被创建,它们(的值)就是固定的. 恒定类型可以很好的在基于哈希代码的集合上工作.以Object.GetHashCode()方法返回的值,对同一个实例是必须相同的 2.一个客户类 ...
- 前端--关于客户端javascript
浏览器中的Javascript 客户端javascript就是运行在浏览器中的javascript,现代的浏览器已经有了很好的发展,虽然它是一个应用程序,但完全可以把它看作是一个简易的操作系统,因为像 ...
- Oracle11g的注册表清理
每次卸载了oracle总是有一堆注册表没有清理,麻烦,特地在网上找了一个较为完整的,全文复制过来,存自己这里,如下: <<< Windows Registry Editor Vers ...
- [转载]一个小例子介绍Obj-C的函数命名方式
原文链接:http://www.cnblogs.com/liufan9/archive/2013/04/02/2995626.html 对于以前做C#或者JAVA开发的朋友而言,初次接触iOS开发,O ...