zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    测试方案
    如何编写一个好的测试计划
    一个好的测试过程
    java后台生成echarts图表并保存图片
    Javascript数组排序,并获取排序后位置对应的原索引(堆排序实现)
    修改tomcat编码方式
    json序列化反序列化后function丢失
    Mysql数据库存取性能优化
    java创建文件
    Java POI导出ppt简单实现
  • 原文地址:https://www.cnblogs.com/heyuqing/p/6143594.html
Copyright © 2011-2022 走看看