1.类选择器 div.img：选中 class=img 的 div
2.img:nth-child(1)：选中第一个 img 子元素
3.transform 位移（transform 属于视觉偏移，不改变元素原本文档流占位，不会挤开其他盒子。）
translateX(50px)：水平右移 50px
translateY(50px)：垂直下移 50px
translate(x,y)：简写，同时控制水平、垂直偏移
（1. translateX (x) 水平偏移，Y 轴不动
2. translateY (y) 垂直偏移，X 轴不动
3. translate (x,y) 简写，同时控制横竖偏移）
注意：重复写 transform 会覆盖，只生效最后一行 translate(50px,50px)
<html>
<head>
<meta charset="UTF-8">
<title>偏移</title>
<style>
*{margin: 0;padding: 0;}
div.img{
width: 1200px;
height: 500px;
border: 2px solid red;
}
img{
border: 1px solid black;
}
img:nth-child(1){
transform: translateX(50px);
transform: translateY(50px);
transform: translate(50px,50px);
}
</style>
</head>
<body>
<div class="img">
<img src="img/左上.png"/>
<img src="img/右上.png"/>
<img src="img/左下.png"/>
<img src="img/右下.png"/>
</div>
</body>
</html>
浙公网安备 33010602011771号