第八章：定位、锚点、透明、Flash

首先来看定位position

一、position定位属性和属性值

position 定位属性，检索对象的定位方式；
语法：
position：static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/initial(最初的)
取值：

1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据《浏览器》进行定位，而其层叠通过z-index属性定义
3、relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.
4、fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；
5、inherit:规定元素的定位方式继承父元素的position的属性值。
注：任何元素设置过脱离文档流的定位方式时，就有了块元素的显示特性
6、sticky：(粘性定位)
粘性定位，该定位是相对定位和固定定位的集合，在跨越特定阈值前为相对定位，之后为固定定位。
7、unset(未设置，是inherit和initial的结合)
当当前属性有继承性时，他解析的是继承(inherit)所得来的属性值 ，如果当前属性没有继承，解析的是初始（initial）值。

二、定位元素的层级属性

z-index : auto |number设置定位对象的层叠顺序。

auto：默认值。遵循结构，后写的定位元素层的顺序靠上。
number:无单位的整数值。可为负数，数值越大，层的顺序越靠上

说明：
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。
绝对和相对定位的区别

1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

锚点连接

一、锚点连接的语法和应用场景

命名锚点的作用：在同一页面内的不同位置进行跳转。
锚点链接语法：

1)给元素定义命名锚记名
语法：<标记 id="命名锚记名">
2)命名锚记连接
语法：链接文本或图片

透明

一、透明写法

IE9以下浏览器写法：filter:alpha(opacity=value);取值范围 0-100
兼容其他浏览器写法：opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9---1)
rgba(255,255,0,0.5)：(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器

Flash和marquee(滚动字幕)

1、插入flash

1）语法：

2）将flash背景设置为透明

给标记添加属性：wmode="transparent"

说明：

flash源文件格式.fla,
导出影片为.swf,
创建播放器格式为.exe.

3）IE中不显示flash,可做如下操作：

A.下载安装flash player;
B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用：

 
内容