关于CSS的几种定位方法、CSS透明度的一些问题

定位的作用

普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）

定位的实现

使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置

定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位

边偏移定位元素的位置，使用“top”、“right”、“bottom”和“left”来描述。

• 边偏移属性

  left：设置元素的左侧 距离参考点的左侧 距离 right：设置元素的 右侧 距离参考点右侧 距离 top：设置元素的 顶部 距离参考点 顶部的 距离 bottom：设置元素元素 底部 距离 参考点底部的 距离

• 取值

  • 长度值：px/em等

  • 百分比：相对于包含块计算

  • auto 默认值

  • 允许使用负值

注：

通常水平位置通过left或right控制，垂直位置通过top或bottom控制

非定位元素设置此属性无效定位模式详解

postion:relative相对对定位

相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变。

偏移的参考位置： 相对于 原来的的位置 进行偏移

基础特性

• 不脱离文档流

• 提升元素层级

• 不定义偏移量时对元素基本没有影响

应用场景

通常作为定位父级配合绝对定位使用

postion:absolute绝对定位

没有定位父级时 相对于html进行定位，有定位父级时相对于最近的定位父级进行定位

以有定位属性的父元素为参考进行偏移，如果父元素没有定位属性，继续向上一级找有定位属性的先辈元素，如果都没有，找到html进行偏移

基础特性

• 脱离文档流

• 提升元素层级

应用场景：

通常配合绝对定位使用（父相子绝），如焦点图中的分页，翻页，视频网站中的 vip标签等

postion:fixed 固定定位

始终相对于浏览器窗口定位。即使窗口是滚动的它也不会移动：

基础特性总结

• 脱离文档流

• 提升元素层级

应用场景：

相对于窗口定位的元素 如弹窗、跟随滚动的导航、侧边栏

postion:static静态定位

表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

• 常用于重置 定位属性

• 静态定位的元素不会受到 top, bottom, left, right影响。

定位元素的层级顺序

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个定位元素的堆叠顺序（哪个元素应该放在前面，或后面）

• 取值

  • auto(默认值) 堆叠顺序与父元素相等

  • 不带单位的数字：值越大显示越靠上

• 总结

  • 普通层，浮动层，定位层覆盖关系总结

    • 普通层：结构靠后的覆盖靠前的，子元素覆盖父元素

    • 浮动层：浮动层覆盖普通层，浮动层之间同上

    • 定位层：定位层高于普通和浮动层 【定位层之间默认是同上，也可以通过z-index调整覆盖关系】

实现盒子水平垂直居中的方法

方法一：

• 实现思路：margin负值配合定位的百分比

  • 给需要居中元素设置定位

  • left:50%

  • top:50%

  • margin-left: -当前元素宽度的一般

  • margin-top: -当前元素高度的一半

方法二：

• 实现思路：left,right,top,bottom并用，配合margin：auto;

  如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。

• 注意：ie7及以下浏览器不兼容

定位对元素的影响

• 相对定位基本不改变元素本身的特性

• 绝对、固定定位

  • 脱离文档流

  • 提升元素层级

  • 未定宽度的块元素适应内容

  • 使行内元素生成块级框

• 注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置。

CSS 透明

rgba()

• 语法： rgba(r,g,b,a)， 说明：r表示red,g表示green,b表示blue,a表示alpha透明度

• 取值: r,g,b取值范围 0-255 a透明度，取值0-1

• 使用说明：

  设置颜色的不透明度， [一般用于调整background-color、color、box-shadow等的不透明度】

• 兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持

opacity

• 语法： opacity:0.5:

• 【取值：0-1】 0表示全透明，1表示全不透明，0-1之间表示半透明

• 使用说明：

  设置opacity元素的所有后代元素会随着一起具有透明性， 【一般用于调整图片或者模块的整体不透明度】

• 兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持

补充了解：IE专属滤镜

• 语法：  filter:alpha(opacity=数字)

• 取值：

  数字取值0-100

  0表示全透明，100表示全不透明，0-100之间表示半透明

• 兼容性：仅支持IE6、7、8、9，在IE10版本被废除

• 注意：在IE6、7、8中，设置了filter:Alpha的元素，子元素设置为【相对定位】，可以让子元素不透明

• 思维导图 

•