<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也不会覆盖父元素吧。
1．在同一个div中，编写如下图所示的一段代码，并在这段代码中设置dive的宽度和高度，以便文本具有特定的范围。
2．找到背景，如下图所示，添加背景后的图像作为背景图案。
3．在后台添加url（）。为了连接图像，在url中写入背景图像的路径。
4．你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。
5．这样，保存后的文本将覆盖在图片的顶部。
CSS 中的根元素是指 :root 选择器 匹配到的元素，
也就是文档树中最顶层结构的元素。
在不同的场景下具体的根元素不同。
在 HTML 中是 <html>元素，但在其他情况下，就不是 <html>元素。
（1）HTML
（2）XML
（3）SVG
