关于html图层叠加显示

html-css010

关于html图层叠加显示,第1张

z-index:-1postion:relative

在style里

其中z-index数值越小图层显示越底下,数值越高显示越上层

按照下边这个来:

<td style="position:relative">

<img style="position:absolutez-index:1" width="150" height="200" src="" />

<img style="position:absolutetop:60pxleft:30pxz-index:2" width="95" height="125" src="" />

</td>

HTML:

是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。

但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

使用伪类样式,设置div的属性position为absolute,

还有属性 z-index:1这个属性设置在层叠里的第几个层

代码如下:

<style type="text/css">

<!--

#Layer1 {

position:absolute

background-color:#0066FF

left:55px

top:26px

width:383px

height:291px

z-index:1

}

#Layer2 {

position:absolute

background-color:#FF0000

left:104px

top:57px

width:250px

height:218px

z-index:2

left: 58px

}

-->

</style>

<body>

<div id="Layer1">sss</div>

<div id="Layer2">aaa</div>

</body>