定位网页元素

定位网页元素

一、position属性：

1.static：默认值，网页没有定位

2.relative:相对定位

（1）设置相对定位的元素，盒子会相对于他原来的位置进行偏移，达到新位置。

（2）设置相对定位的元素，盒子仍然在原来的文本流中，对父级元素和相邻的元素不受影响。，。

（3）设置相对定位的元素，盒子原来的位置会被保留下来。

（4）对于浮动的元素，相对定位也管用

3.absolute:绝对定位

（1）使用了绝对定位的元素以它最近的一个“已经定位”的“祖先”元素为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准来进行定位。

（2）绝对定位的元素，从文档流中脱离，这意味着他们对其他元素的定位不会造成影响。

4.fixed:固定定位

（1）相对于浏览器窗口来定位。

（2）偏移量不会随着滚动条的移动而移动。

5.固定定位的使用场景：

（1）一般在网页的左右两边固定广告，返回顶部图标、吸顶导航栏中使用。

6.z-index: 用于调整元素定位时重叠层的上下位置，其语法为：

z-index:9999;

需要注意的是，使用z-index的前提必须该元素已经定位了（relative,absolute,fixed）

7.透明度：opacity:设置值，值为0-1，值越小越透明。eg:0.4

在IE8下面使用滤镜：filter:alpha(opacity=40)。