HTML如何在图片上添加内容

演示效果

  最近做的一个效果是网页头部有一张大图，菜单栏漂浮在图片之上。我看到网上讲的很简单，大致原理就是图片定为相对定位，文字定为绝对定位即可。不过我实现的并不顺利，花了几个小时才让菜单栏漂浮在图片上。以下是效果图。

首先布好局：

请注意到此时菜单栏和文字并没有在图片之上，我给菜单栏设置的背景色是半透明的黑色，它若成功漂浮在图片之上，会是半透明的。

现在为图片和文字的盒子.imgw添加位置属性：position:relative;（相对定位）

为文字的盒子.words添加：position:absolute;(绝对定位)

也为菜单栏nav添加：position:absolute;(绝对定位)

这三个定位很重要！！

此时效果如下：

定位完了以后可以看到菜单栏不见了，文字也没有漂浮在图片上。不要着急，菜单栏只是被盖住了，现在给菜单栏设置z-index:10，

文字为它设置距离top:50%,距离left:30%。

这里是完整代码：

   	 	    	 	
 		 		
飞流太萌了