<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用相对定位和绝对定位实现图片层叠</title>
</head>
<style>
.box{
width:450px;
height:276px;
/* border:2px solid #0f0; */
position:relative;
}
.box>img{
width:450px;
height:276px;
}
.s1{
width:52px;
height:36px;
/* border:2px red solid; */
position:absolute;
top:10px;
right:10px;
}
</style>
<body>
<div class="box">
<img src="./img/5.jpg">
<div class="s1">
<img src="./img/2.png">
</div>
</div>
</body>
</html>
显示结果如下：
解释一下：
以上HTML代码中，class为box的父元素里面包含一个img和一个div，我们先给父元素box设置了相对定位，然后又给需要移动的子元素，即小图标，设置了绝对定位。
此时，如果不设置偏移，小图标应该出现在图片的左上角，我们设置top为10px，表示距离父元素的顶边为10像素，设置right为10px，表示距离父元素的右边为10像素。
显示结果如上图所示。
|
窥视卡
雷达卡
发表于 2023-2-1 16:03:23
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 18:26:38
