HTMLCSS学习笔记(五)----定位详解、层级、滤镜遮罩

  • 相对定位

 position:relation  相对定位

 a,不影响元素的本身的特性

 b,不使文档脱离文档流

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

  定位元素位置控制

 top/right/bottom/left 定位元素偏移量

 只针对定位元素有效果

  • 绝对定位

  position:absolute 绝对定位 (是相对于整个文档发生定位偏移

 a,使元素完全脱离文档流

 b,使内嵌支持宽高

 c,块属性标签内容撑开宽度

 d,如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档发生偏移

 (元素越过结构父级找到最近的定位父级,定位父级和结构父级可以是同一个)

 e,相对定位一般是配合绝对定位使用的

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

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

 数值越高,层级越高

 body< html < 文档


 a.link 拥有class=link3的a标签

 div#box 拥有id叫box 的div标签

 这个选择符的优先级与 .class .class{} 相同


  • 滤镜和遮弹窗

  蒙版设置注意点

 1.标准浏览器下  不透明度 opacity:0~1

 2.IE私有 filter:alpha(opacity=0~100)

 3.IEtester不支持IE滤镜

 4.body < html < 文档

  body,html{height:100,body和html的高度和文档高度相同

  弹窗

 让一个盒子始终在页面中左右上下居中 使用绝对定位和margin完成

 {position:absolute;left:50%;top:50%;

 margin-top:1/2(自身高度一半);margin-left:(自身宽度的一半);}

 自身是整个盒子的大小!!!


  • 固定定位

 

 position:fixed 固定定位

 (与绝对定位基本一致,但固定定位是始终相对整个文档进行定位)

 但IE6不支持此条命令。

 position:static 默认值(相当于没有定位)

 position:inherit 从父元素继承定位属性的值


 

 若父级包不住子级,可在父级加overflow:hidden

 在ie6下 ,父级的overflow:hidden是包不住子级的相对定位的

 在ie6下,定位元素的父级宽高为奇数的话,那么在ie6下定位元素的right和bottom都有1px的偏差

 绝对定位和固定定位也有清浮动的效果


原文地址:https://www.cnblogs.com/BBeyes/p/6577598.html