HTML学习笔记Day7

一、position定位属性，检索对象的定位方式

　　1.语法：{position：static（无特殊定位）/absolute（绝对定位）/relative（相对定位）/fixed（固定定位）；}

　　　　1）static：默认值，无特殊定位，对象遵循HTML原则；

　　　　2）absolute：绝对定位，将其从文档流中脱出，使用left/right/top/bottom等属性相对其最接近的一个有定位设置的父元素进行绝对定位；如果不存在这样的父元素，则依据窗口对象定位，而其层叠通过z-index属性定义；

　　　　3）relative：相对定位，将依据right/top/left/bottom（相对定位）等属性在正常文档流中偏移位置；

　　　　4）fixed：固定定位，相对于浏览器的定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过right/left/top/bottom属性来规定；不论窗口滚动与否，元素都会留在那个位置；

　　　　5）inherit：继承父元素的position属性，但需要注意的事IE8以及之前版本的浏览器都不支持inherit属性；

　　　　6）sticky：粘性定位：设置了sticky的元素，在屏幕范围（viewport）时，该元素的位置并不收到影响（设置是top、left等属性无效），当该元素的位置将要移除偏移范围时，定位又会变成fixed，根据left、top等属性称固定位置效果。

　　2.包含块的概念及作用

　　　　1）包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标、偏移和显示范围的参照物即、确定绝对定位的偏移起点和百分比、长度的参考；

　　　　2）默认状态下，窗口是一个大的包含块，所有绝对定位的元素都是根据窗口来定位自己所处的位置和百分比大小显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置；

　　　　3）定义元素为包含块，给绝对定位的父元素添加声明：position：relative；

　　3.元素透明属性：{opacity：value；（value取值范围在0~1）}

　　　　兼容：{filter：alpha（opacity=value）；（value取值范围在1~100）}（兼容IE8及以下版本的浏览器）

　　4.命名锚点链接的应用

　　　　1）定义：是网页中超链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍；

　　　　2）命名锚点链接的应用：（1）命名锚点的作用：在页面内不同的位置进行跳转

　　　　　　　　　　　　　　　  （2）给元素定义命名锚记名：<标记 id=“命名锚记名”></标记>

　　　　　　　　　　　　　　　  （3）命名锚记链接：<a herf="#命名锚记名"></a>

　　5.绝对定位和相对定位的区别

　　　　1）参照物不同，绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；

　　　　2）绝对定位将对象从文档流中拖出，相对定位不破坏正常的文档流顺序；

　　6.定位元素的层叠属性：z-index：auto/number（数值，并且不加单位）

　　　　1）检索或设置对象的层叠顺序：auto（默认值，堆叠顺序与父元素相等）

　　　　　　　　　　　　　　　　　　  number（设置元素的堆叠顺序）

　　　　注：number较大值的对象会覆盖较小值的对象，如果绝对定位对象的number值一样大时，那么将依据他们在HTML文档中声明的顺序层叠，此属性仅仅作用于position的值为relative/absolute/fixed/sticky的对象上。