定位

• 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