CSS核心（四十三）使用相对定位和绝对定位实现图片层叠
<!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像素。
显示结果如上图所示。
是的真的很受益呀真的是学计算机的人心读的幸亏我看了哎~~~要不可惨了~~感谢楼主~~~~~ 很不错的，值得深思！ 天呀,我也要成为程序设计师~ 看来我应该从计算机基础学习了，很受启发。。。。。。。。。。 真的很受启发，但是很多时候只是为了赶进度，只能拿最拿手的最快的办法来写了 ………………………………………………………………………… 我才小学四年级，看不懂 看了此帖，让我更加的感到我自身的不足`~~我要更加努力的学习~学习~~学海是无涯的`~~~ 只要是发现了自己的问题 那就是好样的