如何在html让图片重叠

有两种方式；

①：一张作为背景，一张用<img/>图片标签，如：

<div style="background:url('1.jpg') 0 0 no-repeat">

    <img src="2.jpg" />

</div>

②：两张图片都用<img />标签，用绝对位置定位，利用z-index属性控制其上下层关系，z-index的值越大，就越上如：

<div style="position:relative">

    <img src="1.jpg" style="position:absolute left:0 top:0 z-index:1" />

    <img src="1.jpg" style="position:absolute left:0 top:0 z-index:2" />

</div>

align="left" 有这种用法吗？

首先图片一般在设置大小的。

像你这种用position:absolute图片是相对浏览器的位置定位的。这几个图片都是相对浏览器定位的。分别距浏览器的左边为150px370px590px如果图片的宽度>210px那么图片是会重叠的。

最好的方法是浮动解决，不要使用绝对定位。

比如：img{float:leftmargin:5px}

多个img叠加用css样式控制即可：

如果是背景的话，background 属性可以指定多个图片。

示例如下：

background: url("haoroomsCSS1_s.jpg") 0 0 no-repeat,

url("haoroomsCSS2_s.jpg") 200px 0 no-repeat

就同时指定了两个图片，两个图片的位置可以通过后面的 位置参数调整。

如果是img元素，可以通过给img指定绝对定位的样式，通过绝对定位让两个img按照

要求的方式重叠。

比如：

img#id1 {position:absolutetop:0left:0width:100%display:block}

mg#id2 {position:absolutetop:20pxleft:0width:100%display:block}

如果要使用绝对定位，img的父元素的样式需要加上 position:relative

---