绝对定位的图片

一、HTML给图片绝对定位

在HTML中，我们可以给一张图片添加绝对定位来使其脱离文档流，从而可以在页面上自由移动。下面我们来看一个简单的示例：

<div class="wrapper">
  <h2>这是一个标题</h2>
  <img src="img1.jpg" class="positioned" alt="">
  <p>这是一个段落</p>
</div>

我们在一个div元素内部插入了一个图片和一个段落，同时设定wrapper类的position属性值为relative。图片的class属性为positioned，接下来给图片添加以下CSS样式：

.positioned {
  position: absolute;
  top: 50px;
  left: 50px;
}

这将让图片从其父元素的坐标系中脱离，相对于文档的左上角定位，从该点偏移50像素的左上角继续显示。

当然，还有其他属性可以控制绝对定位元素，例如right和bottom。right：50px；则是将元素向右移动50像素

二、CSS图片绝对定位

在CSS中，我们可以使用绝对定位来控制图片的位置和大小。下面我们来看一个示例：

<div class="wrapper">
  <h2>这是一个标题</h2>
  <img src="img1.jpg" class="positioned" alt="">
  <p>这是一个段落</p>
</div>

同样的，我们用CSS来设置图片的样式，如下所示：

.positioned {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

这将让图片绝对定位，并使其垂直和水平中心在父元素的中心。接下来，我们使用 translate() 函数将它们返回到它们的正确位置。它的 width 更改为 200 像素是因为它太大了，我们需要它更小些

三、CSS图片绝对定位的特殊效果

使用绝对的定位还可以实现复杂的效果，例如拼图游戏中的有序变换。下面我们来看一个简单的示例：

<div class="wrapper">
  <h2>这是一个标题</h2>
  <img src="img1.jpg" class="positioned" alt="">
  <p>这是一个段落</p>
</div>

接下来我们来添加CSS样式，初始状态左上角是0，0：如下

.positioned {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  transition: all 1s ease;
}

这样在后续的操作中就会使用到 transition 这个属性了。然后，我们可以通过类似以下的方式操作来将图片移到它的新位置：

.changed {
  transform: translateX(50%) rotate(-45deg);
  left: 50%;
  top: 100px;
}

然后就可以玩出丰富的效果了。实现过程就是把图片在前后两个位置中间加一个中间状态：

.initial {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
}

.middle {
  transform: translateX(50%) rotate(-45deg);
  left: 50%;
  top: 100px;
  transition: all 1s ease;
}

.final {
  transform: translateY(200%) rotate(180deg);
  left: 80%;
  top: 0;
  transition: all 1s ease;
}

我们假设需要拼成的图形为直角三角形向右倾斜，然后我们可以在中间的效果中进行旋转、偏移和变形。它将在1秒的时间内不间断地从初始状态到中间状态，然后是最终状态。同时谨记，transition属性可以使变化更平缓，过度的效果更自然

总的来说，绝对定位的图片在网页的设计中有着非常重要的地位。它可以实现对于图片在页面布局中的自由设计，同时也可以做到一些比较炫酷的特效。所以，前端程序员在设计页面的时候，绝对定位的图片是避免不了的。