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