定位 position

html结构是fixed包裹relative,relative包裹absolute 

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); 

 

posted @ 2016-02-24 12:38  jill1231  阅读(201)  评论(0编辑  收藏  举报