1．在同一个div中，编写如下图所示的一段代码，并在这段代码中设置dive的宽度和高度，以便文本具有特定的范围。
2．找到背景，如下图所示，添加背景后的图像作为背景图案。
3．在后台添加url（）。为了连接图像，在url中写入背景图像的路径。
4．你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。
5．这样，保存后的文本将覆盖在图片的顶部。
1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏，float: left使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#side-clients ul{
padding-top:35px
margin-right:-15px
}
.hoverbox .preview
{
border-color: #000
width: 302px
height: 302px
position: absolute
z-index: 0
}
.hoverbox a .preview
{
display: none
}
#side-clients li:hover .preview
{
display: block
position: absolute
top: -4px
left: -5px
z-index: 100
}
#side-clients li:hover{ z-index:2 }
#side-clients li{
position:relative
width:40px
height:40px
z-index: 0
border:1px solid #e9e9e9
opacity:.9
margin:0 10px 10px 0
padding:4px
float:left
display:block
color: inherit
background: #eee
border-color: #ddd #bbb #aaa #ccc
border-style: solid
border-width: 0px
color: inherit
}
</style>
</head>
<body>
<div id="side-clients">
<ul class="hoverbox">
<li><a href="##"><img src="images/footer_logo.png" alt="" height="40" width="40"/><img src="images/footer_logo.png" alt="" class="preview" /></a></li>
<li><a href="##"><img src="images/1111.png" alt="" height="40" width="40"/><img src="images/1111.png" alt="" class="preview" /></a></li>
<li><a href="##"><img src="images/a_zhuanti_bg.png" alt="" height="40" width="40"/><img src="images/a_zhuanti_bg.png" alt="" class="preview" /></a></li>
</ul>
</div>
</body>
</html>导致的原因应该是父元素是同一级，同一级元素后面的元素在上层，子元素设置再大的z-index也不会覆盖父元素吧。
