前端基础（7）：定位锚点与透明属性设置

一、position 定位属性和属性值

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

语法：position：static /absolute/relative/fixed   sticky(粘性定位)

relative相对定位/定位偏移量

position:relative; 相对定位

a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；

定位元素位置控制top/right/bottom/left 定位元素偏移量。

absolute绝对定位

position:absolute; 绝对定位

a、使元素完全脱离文档流；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

定位元素位置控制top/right/bottom/left 定位元素偏移量。

fixed固定定位

position:fixed； 固定定位

与绝对定位的特性基本一致，但差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；

sticky(粘性定位)

position:sticky； 粘性定位

a、该元素并不脱离文档流。
b、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
c、元素固定的相对偏移是相对于离它最近的具有滚动框的父元素，如果祖先元素都不可以滚动，那么是相对于窗口来计算元素的偏移量
这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

二、定位元素的层级属性

z-index : auto |number 检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

说明：
较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed，sticky 的对象。

三、包含块的概念及作用

绝对定位的参照物，如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

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

默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，

如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

包含块=绝对定位参照物

绝对定位参照物=整个文档=是定位父级

包含块=html=定位功能父元素

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

绝对和相对定位的区别

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

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

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

命名锚点链接的应用

定义：
是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：

1)给元素定义命名锚记名
    语法：<标记 id="命名锚记名"></标记>

2)命名锚记连接
    语法：<a href="#命名锚记名称"></a>

五、透明写法

opacity:value;(value的取值范围0-1 0.1,0.2,0.3-----0.9---1) 返回顶部