在实际开发页面布局时，运用position，对定位的块级元素的嵌套的效果总是不太理解，这里做了几个测试

一般的在w3c中我们可以很容易的获取定义:

static ： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

inherit　：规定应该从父元素继承 position 属性的值。

absolute : 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative : 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

总的来说 ：

      static呢，就是正常的文档流顺序，默认的，相当于没有定位!

fixed呢， 就是相对于浏览器窗口，就是你滚动条怎么滚动，他还是那个位置，就想是 “粘” 在窗口上了!

　　inherit呢， 就是从父元素继承 position 属性的值，

absolute呢，是脱离文档流的原来的位置是不继续占据了，如果他的父级元素中有已经定位了的不管是absolute的还是relative，它都会相对于他的父级元素来定位，如果他的父级元素中没有定位了的那么它就是相对于body来定位的。也就是说absolute的绝对是有参照物的！

relative呢，是不会脱离文档流的原来的位置也就继续占据了，它是只相对于自身原来的位置来定位的!

　　前三个是很容易理解的，对于absolute和relative的结合使用，做了几个测试

测试（absolute和relative）

　　1.单独的absolute和relative

　　2.relative中的relative，absolute中的relative

　　3.absolute中的absolute，relative中的absolute

　　

<!DOCTYPE html>

<html>

<head>

	<title>position -- absolute -- relative</title>

</head>

<style>

	.test-a{

		position: absolute;

		top:20px;

		left:60px;

		width:200px;

		height: 100px;

		background: red;

	}

	.test{

		width:400px;

		height: 100px;

		background: green;

	}

	.test-r{

		position:relative;

		top:50px;

		left:130px;

		background: yellow;

		width:160px;

		height: 180px;

	}

	.test-rr{

	    position: relative;

	    top: 20px;

	    left: 100px;

	    width: 600px;

	    height: 300px;

	    background: blue;

	}

	.test-aa{

		position: absolute;

	    top: 24px;

	    left: 34px;

	    background: orange;

	}

	.test-aaa{

		position: absolute;

	    top: 24px;

	    left: 34px;

	    width:400px;

	    height:200px;

	    background: #18E457;

	}

	.test-aaaa{

		position: absolute;

	    top: 124px;

	    left: 134px;

	    width:400px;

	    height:200px;

	    background: yellow;

	}

	.test-rrr{

		position: relative;

	    top: 24px;

	    left: 34px;

	    width:400px;

	    height:200px;

	    background: yellow;

	}

	.test-rrr{

		position: relative;

	    top: 124px;

	    left: 134px;

	    width:400px;

	    height:200px;

	    background: red;

	}

	.test-r-a{

		position: absolute;

	    top: 124px;

	    left: 134px;

	    width:800px;

	    height:800px;

	    background: yellow;

	}

	.test-a-r{

		position: relative;

	    top: 124px;

	    left: 134px;

	    width:700px;

	    height:700px;

	    background: red;

	}

</style>

<body>

	<div class="test-a">absolute</div>

	<div class="test">分割</div>

	<div class="test-r">relative</div>

	<h2	>结合使用</h2>

	<p>parentNode的position不是relative或absolute,那absolute的绝对对象是针对body的

	  parentNode的position  是relative或absolute,那absolute的绝对对象是针对parentNode的

	  也就是说absolute的绝对是有参照Node的 </p>

	<div class="test-rr">

		absolute外的relative

		<div class="test-aa">

			relative内的absolute，，，里面这个div是相对外面那个div定位的

		</div>

	</div>

	<div class="test-aaa">

			absolute外的absolute

			<div class="test-aaaa">

				absolute内的absolute,,,,,,,,里面这个div是相对外面那个div定位的

			</div>

	</div>

	<div class="test-rrr" >

			relative外的relative

			<div class="test-rrrr">

				relative内的relative,,,,,,,,里面这个div是相对原来位置定位的

			</div>

	</div>

	<div class="test-r-a">

		relative外的absolute

		<div class="test">

			<div class="test-a-r">

				relative内的absolute，，，里面这个div是相对原来位置定位的

			</div>

		</div>

	</div>

</body>

</html>

　　其实很多时候，网上的经验，很多很杂，自己实践一下，才能自己真正理解

理解css 中的position五个属性的更多相关文章

  1. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. css详解position五种属性用法及其含义

    position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...

  5. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  6. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  7. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  8. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  9. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

随机推荐

  1. CodeIgniter网站静态化管理系统

    CodeIgniter本身带了一套静态化系统 使用方法如下: $this->output->cache( 3 );//每三分钟重新生成一次静态页面 不过这个在系统化的编辑中不方便管理 由此 ...

  2. java的向下转型

    class A{ public void fun1(){ System.out.println("A-->public void fun1()"); } public voi ...

  3. 使用纯代码定义UICollectionView和自定义UICollectionViewCell

    1.自定义UICollectionView 2.实现<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UICollec ...

  4. Oracle用户及角色的权限管理[Oracle基础]

    1.查看全部用户:   select * from dba_users;   select * from all_users;   select * from user_users; 2.查看用户或角 ...

  5. git reset and git checkout

    git reset --hard <commit>: 1.替换引用的指向.引用指向新的提交ID; 2.替换暂存区.替换后,暂存区的内容和引用指向的文件夹树一致; 3.替换工作区.替换后,工 ...

  6. 文件和目录之设置用户ID和设置组ID

    与一个进程相关联的ID有6个或更多,它们如表4-4所示: 表4-4 与每个进程相关联的用户ID和组ID 实际用户ID                            我们实际上是谁 实际组ID ...

  7. eclipse中不能找到dubbo.xsd解决方法

    使用dubbo时遇到问题: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document 'htt ...

  8. iOS常见文件及程序的启动原理

    一. iOS中常见文件 (一). Xcode6之前 创建项目,默认可以看见一个存放框架的文件夹 info文件以工程文件名开头,如:第一个项目-Info.plist 项目中默认有一个PCH文件 (二). ...

  9. 在Objective-C声明Block的几种方式

    1.作为局部变量 returnType (^blockName)(parameterTypes) = ^returnType(parameters) {...}; 2.作为类的属性 @property ...

  10. C++的4种编程范型

    基于过程procedural-based 基于对象object-based 面向对象object-oriented 泛型技术generics