css中插入的图片如何定位

CSS 中向网页中插入图片是非常常见的操作，但是在插入图片的同时，我们也需要考虑如何将这些图片定位到合适的位置上，以便达到更好的视觉效果。
在 CSS 中定位图片通常可以使用两种方法，分别是绝对定位和相对定位。下面我们将对这两种方法进行详细讲解。
1. 绝对定位
绝对定位是将图片相对于其父元素进行定位，通过设置元素的某些属性（例如 top、right、bottom 和 left）来控制图片在父元素中的位置。下面我们来看一下绝对定位的实现代码：

.img-container {
  position: relative; 
  /* 绝对定位需要依赖于定位上下文 */
}

img {
  position: absolute;   
  /* 将图片设置为绝对定位 */

  top: 50%;
  left: 50%;
  /* 将图片的上边缘和左边缘分别定位在父容器的水平垂直中心位置 */

  transform: translate(-50%, -50%); 
  /* 偏移量为图片自身宽高的一半，以便将图片的中心定位在水平垂直中心位置 */
} 

在这个例子中，.img-container 是图片所在的父容器，在这里我们将它设置为相对定位。如果我们没有为父容器设置定位属性，那么子元素的定位属性将不会起作用。
接着，我们在img元素上设置了 position 属性为 absolute，这意味着它是一个绝对定位的元素。然后我们使用 top 和 left 属性将图片的上边距和左边距设置为 50%，也就是让它在父容器的中心位置。最后我们使用 transform 属性来对图片进行微调，使它的中心定位在水平垂直中心位置。
2. 相对定位
相对定位是将图片相对于它在文档流中的位置进行定位，它不会影响其他元素的布局。实现代码如下：

img {
  position: relative; 
  /* 将图片设置为相对定位 */

  top: 20px; 
  left: 20px; 
  /* 将图片相对于它在文档流中位置向右下方偏移 20 像素 */
} 

在这个例子中，我们将图片设置为相对定位，然后使用 top 和 left 属性将图片相对于它在文档流中的位置向右下方偏移 20 像素。
总结
以上就是 CSS 中两种基本的定位图片的方法。需要注意的是，当使用绝对定位时，需要确保父容器元素设置了 position: relative 的属性，否则子元素的定位属性将不起作用。在实际开发中，我们可以根据自身需要选择合适的定位方式，以便使网页呈现更好的视觉效果。