CSS 从 div 边缘突出图像

Question

#col{
width:200px; 
float:left;
overflow:visible;
position:relative;
z-index:2;
}

<div id="col">

<img style="margin-left:-6px; z-index:999; position:relative;"  src="img.jpg" />
</div>

我希望图像向左突出 6 像素，但它被截断了。

我还必须在每行代码的字体中放置 4 个空格，这非常慢!

Answer 1

您的图像被截断了，因为您在父级 div#col 上使用了溢出

<div id="col">
  <img src="img.jpg" alt="some info">
</div>

CSS

#col{
width:200px; 
float:left;
position:relative;
/*overflow: visible;*// remove
/*z-index:2;*// no need to do that
}
#col img {
position: absolute;
top: 0;
left: -6px;
width: width of image in px;
height: height of image in px;
}