关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:

语法:

position: relative | absolute

relative:
对象遵循常规流,而且參照自身在常规流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的不论什么元素。
absolute:
对象脱离常规流。使用toprightbottomleft等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。

说明:

当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)

当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。

备注:position: absolute时。leftrighttopbottom至少指定其一,对象可层叠。层叠通过z-index属性定义。

position: relative时对象不可层叠

css position: relative,absolute具体解释的更多相关文章

  1. CSS position relative absolute fixed

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

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  3. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  4. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  5. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  6. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  7. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  8. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  9. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

随机推荐

  1. [Algorithms] Using Dynamic Programming to Solve longest common subsequence problem

    Let's say we have two strings: str1 = 'ACDEB' str2 = 'AEBC' We need to find the longest common subse ...

  2. MyEclipse导入Hibernate出现Path must include project and resource;/project name

    如图,在MyEclipse 2014以下版本中都没遇见这个问题. 在导入Hibernate框架的时候,可以说真的随缘,运气不好,明明配置全都没问题,还是连续几次失败,这个时候除了烧高香拜拜,也只能靠百 ...

  3. MyBatis Generator生成DAO——序列化

    MyBatis Generator生成DAO 的时候,生成的类都是没有序列化的. 还以为要手工加入(開始是手工加入的),今天遇到分页的问题,才发现生成的时候能够加入插件. 既然分页能够有插件.序列化是 ...

  4. UVA 111 (复习dp, 14.07.09)

     History Grading  Background Many problems in Computer Science involve maximizing some measure accor ...

  5. 【BIEE】04_当维度表中的维不存在事实表中,需要展示所有维度并且数据类展示为0

    有时候,我们往往会存在这样的需求 例如:事实表的数据如下 EMP_FACT表示事实表,DIM_LEVEL是维度表 预期效果:(根据员工信息,分析各等级员工工资与员工个数) 我们在BIEE报表中新建报表 ...

  6. Android中ListView分类

    1 http://my.oschina.net/bv10000/blog/106436 2

  7. c++打印蛇形矩阵

    一个m*n的矩阵里按照下图形式填充,最后形成的矩阵即为蛇形矩阵,下图是m=4, n =5时的蛇形矩阵: 方法一:逐层循环 #include <iostream> using namespa ...

  8. MySQL5.5中文支持

    1. /etc/my.cnf.d/client.cnf [client] #password = [your_password] port = 3306 socket = /tmp/mysql.soc ...

  9. mysql innodb_data_file_path配置增加

    在配置innodb_data_file_path=ibdata1:200M:autoextend时,想增加空间,默认文件不断增加直到200M,如果要增加大小,直接修改参数增加大小会报错: auto-e ...

  10. linux 下mtime,ctime,atime分析

    一.atime.ctime与mtime atime是指access time,即文件被读取或者执行的时间,修改文件是不会改变access time的.网上很多资料都声称cat.more等读取文件的命令 ...