Css定位之relative_慕课网课程笔记

 

前言

最近在慕课网上跟着张鑫旭大神重新学习一遍CSS相关的知识,以下是学习的笔记以及个人一些理解

relative对绝对定位的限制

1.限制绝对定位 绝对定位的top、left、right和bottom是相对最近的一个relative父元素的。

2.限制层级 绝对定位的层级优先级是低于其父元素相对定位的层级的

3.限制overflow 绝对定位可以不受父容器overflow的影响，即可以溢出，但是父元素加上relative后，即可以完美包裹绝对定位元素.

relative自身定位

1 相对自身 当relative使用top、left、right和bottom来移动定位时，这些属性上的值是相对于relative在当前文档流中的位置位移，相对的是，绝对定位则是相对于离它最近的relative父元素

2 无侵入 当相对定位位移时，类似于悬浮效果的位移，不会影响其他元素，即其周末的元素不会因为relative的位移而调整位置，相对的，其它定位可能会引起其它元素的位移（比如说margin）

3 同时设置top bottom 和left right怎么办？ 绝对定位是拉伸，相对定位是斗争，简而言之就是top>bottom,left>right

relative层级

1 提高层叠上下文 当两个元素的层级一样时，在文档流中添加有relative的元素层级会比较高，而不会由后面的元素覆盖前面的

2 新建层级上下文和层级控制 相对定位的z-index为auto时，就无法限制子元素为绝对定位的层级了，相当于这时候相对定位的z-index为零了。 IE6/7是不行的，既然是auto也会限制绝对定位

relative的最小化影响原则

所谓最小化影响原则，就是尽量降低relative属性对其他元素或布局的潜在影响

1 尽量避免使用relative 绝对位尽量不依赖相对定位

2 relative最小化原则 将需要的元素从大的dom结构中分离

 

外链:

http://www.imooc.com/learn/565