一聚教程网:一个值得你收藏的教程网站

热门教程

HTML5图片层叠如何实现 HTML5图片层叠实现代码示例

时间:2022-06-25 17:55:25 编辑:袖梨 来源:一聚教程网

HTML5图片层叠如何实现?本篇文章小编给大家分享一下HTML5图片层叠实现代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

其中有一个页面布局如下所示,

红色方框标注的部分是由三张图片组合而成,各部分图片如下:

要想实现上图的图片重叠,只需设置属性元素的position和z-index属性。

z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。即z-index的值越大显示越靠上。

position:有以下几个值:static,relative,absolute,fixed。

Static:静态定位。如果没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。

Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

具体实现如下,div布局

需保养

整合后的运行效果:

热门栏目