今日内容：
- 1、position 定位属性和属性值
- 2、定位元素的层级属性
- 3、包含块的概念和应用
- 4、锚点连接的语法和应用场景
- 5、透明属性的应用
- 6、扩展：Flash和marquee(滚动字幕)
一、position 定位属性和属性值
一、position 定位属性和属性值
position 定位属性，检索对象的定位方式；
定位都脱离层。
语法：position：static /absolute/relative/fixed
absoluted/relative/fixed 对定位有效，对层级属性Z-index有效。
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：绝对定位，将对象从文档流中脱离出来，使用top/right/left/bottom等属性相对其最接近的一个并有定位设置的父元素（祖先元素|祖先元素不包含叔叔级的）进行绝对定位；如果不存在这样的父对象，则依据根元素(html)浏览器进行定位，而其层叠通过z-index属性定义。
可以脱离当前的大容器，并且不占位。绝对定位脱离整层，float脱离半层。
3、relative ：相对定位，该对象的文档流位置不动，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；其层叠通过z-index属性定义。
（一般给父层级添加relative属性值）
相对于自身位置进行偏移
元素设置：margin:0 auto时：
（1）box为相对定位时（相对自身），在页面中居中。
（2）box为绝对定位时（相对于根元素HTML），在页面中居左。
4、fixed：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范（IE6浏览器不支持此定位） ；
跟绝对定位一样的都是脱离文档流，不占位，并且永远相对于当前浏览器的可视窗口进行位置偏移。
二、定位元素的层级属性
z-index : auto |number
检索或设置对象的层叠顺序。
auto：默认值（0），遵从其父对象。
number：无单位的整数值。可为负数，上左为负值，右下为正值。
没有设置z-index时，根据结构顺序，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
结构在最后的，加定位时层级最高。
说明：
较大数值的对象会覆盖在较小数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。
三、包含块的概念及作用
只有绝对定位absoluted有包含块
包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父元素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。
距定位元素最近的并且带有定位属性的父元素，是绝对定位元素的包含块，为绝对定位元素提供坐标偏移和显示范围的参照物。
position:absolute;和position：relative；可以让标签变成包含块
绝对和相对定位的区别
1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
应用：垂直水平居中的方法：
1.用定位让元素或图片实现垂直水平居中：
（1）给父元素定位：position:relative;
（2）给子元素加绝对定位：position：absolute;
（3）给子元素添加坐标属性：top:0;left:0;right:0;bottom:0;margin:auto;
（相当于给元素提供了四个参照范围）
2.让一个元素在当前浏览器窗口垂直水平居中：
第一种方法：
（1）给元素添加固定定位：position:fixed;
（2）给元素添加坐标属性：top:0;left:0;right:0;bottom:0;margin:auto;
第二种方法：
（1）给元素添加固定定位position：fixed;
（2）top:50%;left:50%;
（3）margin:-元素高度/2px 0 0 -元素宽度/2px；
(中心点的移动：从左上移到中心点)
四、锚点连接的语法和应用场景
命名锚点链接的应用
定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1、给元素定义命名锚记名
语法：<标记 id="命名锚记名"> </标记>
2、命名锚记连接
语法：<a href="#命名锚记名称"></a>
五、透明写法
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100
兼容其他浏览器写法：opacity:0.value;(value的取值范围0-1 0.1,0.2,0.3-----0.9---1)
用这种方法标签内的元素也变透明
background:rgba(r,g,b,0-1);
IE8不支持rgba的写法。
六、Flash和marquee(滚动字幕)
1、插入flash
（1）语法：
<object width="value" height="value">
<param name="movie" value="flash路径及全称" />或者
<embed width="value" height="value" src="flash路径及全称"></embed>
</object>
（2）将flash背景设置为透明
<embed wmode="transparent" />
给<embed>标记添加属性：wmode="transparent"
说明：flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.
gif格式：.gif。
（3）IE中不显示flash,可做如下操作：
打开IE浏览器，选择工具菜单--Internet选项----安全----低。
2、滚动字幕的应用
<marquee
behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"
scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)>
内容
</marquee>