定位锚点透明

定位锚点透明

学习目标

• 1、position 定位属性和属性值
• 2、定位元素的层级属性
• 3、包含块的概念和应用
• 4、锚点连接的语法和应用场景
• 5、透明属性的应用

一、position 定位属性和属性值

position 定位属性，检索对象的定位方式；
语法：position：static /absolute/relative/fixed/sticky/unset/inherit(未设置是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、sticky：(粘性定位) 相对离自己最近且有滚动条的父元素做的定位

粘性定位，该定位是相对定位和固定定位的结合，在跨越特定阈值前类似相对定位，之后类似固定定位。

二、定位元素的层级属性

z-index : auto |number

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

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

三、包含块的概念及作用

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

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

绝对和相对定位的区别

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

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

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

命名锚点的作用：在同一页面内的不同位置进行跳转。
锚点链接语法：
1)给元素定义命名锚记名
语法：<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法：<a href="#命名锚记名称">链接文本或图片</a>

五、透明写法

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以上的浏览器

返回顶部