定位 position

Posted 2020-06-16

position:relative;相对定位

a 不影响元素本身的特性

b 不使元素脱离文档流（元素移动之后原始位置会被保留）

c 如果没有定位偏移量，对元素本身没有任何影响

d 提升层级

 定位元素位置控制：top|right|left|bottom 定位元素偏移量 

 

position:absolute;绝对定位

  a 使元素完全脱离文档流

b 是内嵌支持宽高

c 如果有定位父级 相对于 定位父级发生偏移，没有定位父级相对于document（可视区域）发生偏移

d 相对定位一般都是配合绝对定位元素使用

f 提升层级

 

z-index: [number];定位层级

a 定位元素默认后者层级高于前者

b 建议在兄弟标签之间比较层级 

 

position:fiexd;固定定位

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位

问题：IE6不支持固定定位

 

定位其他值

position:static;默认值

position:inherit;从父元素继承定位属性的值（不兼容） 

 

定位清浮动方法，遮罩滤镜

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法

 

position:fiexd;固定定位元素子级的浮动可以不用写清浮动方法（IE6不兼容）

 

遮罩弹窗

标准不透明度：opacity:0-1

IE滤镜(IE6,7) :filter:alpha(opacity=0-100);