Css定位之relative_慕课网课程笔记
2016-12-08 09:10 紫日残月 阅读(235) 评论(0) 编辑 收藏 举报
前言
最近在慕课网上跟着张鑫旭大神重新学习一遍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