在网页制作中,常常使用CSS来调整图片的位置。但是有时候我们会发现图片无法被CSS正确调整位置,这是为什么呢?
img{ position: relative; left: 50px; }
可能大家会这样使用CSS调整图片的位置,但是发现该CSS代码并没有生效,图片依旧在页面中待在原来的位置。这是因为,图片本身是一个内联元素,而内联元素的position属性会被忽略。我们需要将图片设置为块级元素才能够正确的调整它的位置。
img{ display: block; position: relative; left: 50px; }
在上面的代码中,我们将img元素的display属性设置为块级元素,这样就可以正确的使用CSS调整它的位置了。当然,另外一种常见的解决方法是使用外层容器元素来调整图片的位置。
.parent{ position: relative; left: 50px; } img{ position: absolute; }
在上面的代码中,我们使用了一个外层容器元素,将其position属性设置为relative,然后将图片的position属性设置为absolute。这样图片会以父元素为参照来定位,从而实现了图片的位置调整。
所以,遇到图片无法被CSS正确调整位置的问题,这些方法可以帮助我们解决。要么将图片转为块级元素调整(display: block),要么使用外层容器元素(position: relative)来调整图片的位置。