定位锚点透明

学习目标

position定位属性和属性值
定位元素的层级属性
包含块的概念和应用
锚点连接的语法和应用场景
透明属性的应用
扩展：marquee（滚动字幕）

一、Position定位属性和属性值

Position定位属性（告诉浏览器这是定位属性）；
语法：position：static/absolute/relative/fixed
取值：
1、static：默认值，无特殊定位，遵循html原则；（无任何变化，网页正常排版）
2、Relative：什么是相对定位？相对定位就是相对于自己以前在标准流中的位置来移动。
相对定位，配合right，top，left，bottom等属性在正常文档流中偏移位置；
特点：

a.相对定位是不脱离标准流的，会继续在标准流中占用一份空间。
b.由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素。
c.由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。
相对定位的作用：1.用于对元素进行微调。2.配合绝对定位来使用。

3、absolute：什么是绝对定位？绝对定位就是相对于父元素（设置了相对定位的元素）来定位的。
特点：

a.绝对定位的元素是脱离标准流的，不占空间。
b.绝对定位的元素是不区分块级元素/行内元素/行内块级元素。
c.默认情况下所有的绝对定位的元素，无论有没有父元素，都会以body作为参考点来定位。
d.如果一个绝对定位的元素有父元素，并且父元素也是定位流，那么这个绝对定位的元素就会以定位流的那个父元素作为参考点。

4、fixed：什么是固定定位？固定定位可以让某个盒子不随着滚动条的滚动而滚动（IE6浏览器不支持此定位）；
特点：

a.固定定位的元素是脱离标准流的，不会占用标准流中的空间。
b.固定定位和绝对定位一样不区分行内/块级/行内块级。

二、定位元素的层级属性

1.什么是z-index属性？默认情况下所有的元素都有一个默认的z-index属性，取值是0。Z-index属性的作用是专门用于控制定位流元素的覆盖关系的。
Z-index：auto|number
Auto：默认值。遵从其父对象
Numbei:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后,数值越大，层越靠上；
说明：
较大数值的对象会覆盖在较小数值的对象之上。如两个绝对定位对象的此属性具有同样的number值，那么将依据他们在HTML文档中声明的顺序层叠。此属性仅仅作用于position属性值relative或absolute，fixed的对象。

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父元素设置了position：absolute；那么子元素也会相对父元素来定义自己的位置。
绝对和相对定位的区别
1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

四、锚点链接的语法和应用场景

命名锚点链接的应用
定义：
是网页制作中超链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1）给元素定义命名锚记名
语法：<标记id=“命名锚记名”></标记>
2）命名锚记链接
语法：<a href=”#命名锚记名称”></a>

五、透明写法

IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100
兼容其他浏览器写法：opacity：0.value；（value的取值范围0-1）0.1---0.9-1

六、marquee（滚动字幕）

滚动字幕的应用：

<marquee  
behavior(行为)=”scroll(滚动)/alternate（晃动）”
direction（方向）=”up(从下向上)/down(从下向上)/left（从左向右）/right(从左向右)”
scrollamount(滚动速度)=”value”
height=”value(上下滚动范围)”
width=“value(左右滚动范围)”>
内容
</marquee>

<marquee
behavior(行为)=”scroll(滚动)/alternate（晃动）”
direction（方向）=”up(从下向上)/down(从下向上)/left（从左向右）/right(从左向右)”
scrollamount(滚动速度)=”value”
height=”value(上下滚动范围)”
width=“value(左右滚动范围)”>
内容