定位

  • relative相对定位/定位偏移量
    • position:relative;相对定位
      • 不影响元素本身的特征
      • 不使元素脱离文档流(元素移动之后原始位置会被保留)
      • 如果没有定位偏移量,对元素本身没有任何影响
      • 提升层级
    • 定位元素位置控制
      • top | right | bottom | left 定位元素偏移量
  • absolute绝对定位/定位层级
    • position:absolute;绝对定位
      • 使元素完全脱离文档流
      • 使内嵌支持宽高
      • 块属性标签内容撑开宽度
      • 如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移
      • 相对定位一般都是配合绝对定位元素使用
      • 提升层级
    • z-index:[number];定位层级
      • 定位元素默认后者层级高于前者
      • 建议在兄弟标签之间比较层级
  • position:fixed;固定定位
    • 与绝对定位的特性基本一致,差别是始终相对整个文档进行定位
    • 问题:IE6不支持固定定位
  • 定位其他值position:relative | absolute | fixed | static | inherit;
    • position:static;默认值
    • position:inherit;从父元素继承定位属性的值(不兼容)
  • 定位清浮动方法、遮罩滤镜
    • position:absolute;绝对定位元素子级的浮动可以不用写清浮动方法
    • position:fixed;固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)
  • 遮罩弹窗
    • 标准不透明度:opacity:0~1;  0--完全透明   1--不透明
    • IE滤镜:filter:alpha(opacity=0~100);
原文地址:https://www.cnblogs.com/web-Knowledge/p/7097747.html