HTML如何在图片上添加内容（如文字，菜单栏，按钮等）
最近做的一个效果是网页头部有一张大图，菜单栏漂浮在图片之上。我看到网上讲的很简单，大致原理就是图片定为相对定位，文字定为绝对定位即可。不过我实现的并不顺利，花了几个小时才让菜单栏漂浮在图片上。以下是效果图。
首先布好局：
请注意到此时菜单栏和文字并没有在图片之上，我给菜单栏设置的背景色是半透明的黑色，它若成功漂浮在图片之上，会是半透明的。
现在为图片和文字的盒子.imgw添加位置属性：position:relative;（相对定位）
为文字的盒子.words添加：position:absolute;(绝对定位)
也为菜单栏nav添加：position:absolute;(绝对定位)
这三个定位很重要！！
此时效果如下：
定位完了以后可以看到菜单栏不见了，文字也没有漂浮在图片上。不要着急，菜单栏只是被盖住了，现在给菜单栏设置z-index:10，
文字为它设置距离top:50%,距离left:30%。
这里是完整代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf-8"> </head> <style type="text/css"> nav{ width: 100%; height: 60px; background: rgba(0,0,0,.3); position: absolute; z-index: 10; } nav ul{ list-style: none; margin: 0; padding: 0; } nav ul li{ text-align: center; float: left; line-height: 60px; } nav ul li a{ width: 100px; color: #fff; font-size: 20px; font-weight: 600; display: block; } nav ul li a:hover,nav ul li a:visited{ text-decoration: none; background: rgba(0,0,0,.5); color: #fff; } .words{font-size: 40px; letter-spacing: 10px; position: absolute; top:50%; left: 30%;} .imgw{position: relative;} </style> <body> <nav> <ul> <li class="active"><a href="#">首页</a></li> <li><a href="#">服务</a></li> <li><a href="#">支持</a></li> <li><a href="#">博客</a></li> <li><a href="#">下载</a></li> </ul> </nav> <div class="imgw"> <img src="images/header1.png" alt="HTML如何在图片上添加内容（如文字，菜单栏，按钮等）" alt= "" width="100%"> <div class="words">飞流太萌了</div> </div> </body> </html>