div CSS样式——两张图片的位置关系

时间:2021-09-28 12:45:26

div CSS样式——两张图片的位置关系

div CSS样式——两张图片的位置关系

以上是实现将logo图片按照相对位置覆盖在另一张图片上的代码。

通过学习,我学到了以下方法:

将第二张图片定位到第一张图片上。

下面是简单的实现:(假设图都是100*100的)

<style>
* {margin:0;padding:0}
div {position:relative;width:500px; heigth:500px; background:#ccc;}
img {display:block;}
//第一种
#img2 {position:absolute; top:0px; left:0px;}//绝对定位,脱离文档流,这样就可以让第二张图片覆盖到第一张上了。
//第二种
#img1 {position:absolute; top:0px; left:0px;z-index:1;}
#img2 {position:absolute; top:0px; left:0px;z-index:11;} //第二种方式,是样第二张的层级高出第一张,这样也可以实现题目要求。
</style>
<body>
    <div>
        <img src='1.jpg' id='img1' />
        <img src='2.jpg' id='img2' />
    </div>
</body>