jscss如何将弹出的图片放在网页的最上层?

html-css017

jscss如何将弹出的图片放在网页的最上层?,第1张

1.在同一个div中,编写如下图所示的一段代码,并在这段代码中设置dive的宽度和高度,以便文本具有特定的范围。

2.找到背景,如下图所示,添加背景后的图像作为背景图案。

3.在后台添加url()。为了连接图像,在url中写入背景图像的路径。

4.你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。

5.这样,保存后的文本将覆盖在图片的顶部。

方法:设置div样式

z-index

:auto

auto可定义为一个值(整数数字),越大代表越置前,如可定义为:

z-index:999。

前提是div是定位元素。

<!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也不会覆盖父元素吧。