[分享]css中如何更改图片的位置

使用CSS更改图片的位置 在网页设计中，图片是不可或缺的元素之一。但是有时候我们需要更改图片的位置，让图片出现在网页的不同位置，这时候就需要用到CSS。img { : relative; left: ...

使用CSS更改图片的位置

在网页设计中，图片是不可或缺的元素之一。但是有时候我们需要更改图片的位置，让图片出现在网页的不同位置，这时候就需要用到CSS。

img {
  position: relative;
  left: 50px;
  top: 20px;
} 

CSS中有两个属性可以控制图片的位置：position和left/top。

position用来设定图片的定位方式，可以取值为static、relative、absolute和fixed。

• static：默认值，按照文档流的方式排列，无法设置left/top属性。
• relative：相对定位，相对于元素原来的位置进行偏移，left/top属性可以有正负值来控制偏移方向和距离。
• absolute：绝对定位，相对于最近的已定位的祖先元素（如果没有就是body元素）进行偏移，left/top属性可以有正负值来控制偏移方向和距离。
• fixed：固定定位，相对于浏览器窗口进行偏移，left/top属性可以有正负值来控制偏移方向和距离。

img {
  position: absolute;
  left: 0;
  top: 0;
} 

left和top属性用来控制图片的偏移位置。left可以控制水平方向的偏移，可以设置正负值来控制left方向的偏移。top可以控制垂直方向的偏移，可以设置正负值来控制top方向的偏移。

当我们想让图片出现在页面的指定位置时，可以使用position和left/top属性来实现。

img {
  position: relative;
  left: 20%;
  top: 50px;
} 

总之，使用CSS可以很容易地控制图片的位置，让网页呈现出更加美观的效果。