在嵌套div中定义绝对边距

Question

我希望当我说“嵌套的div”时能正确地描述它。

我在div中有这样的图像：

content -> content-inner -> column_left

我无法使图像以0 px（屏幕的最左侧）开始。 看来我陷入了div的边距定义中。

div的定义如下（在Chrome Inspector中可见）：

#content {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 2;
    width: 100%;
    min-width: 280px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 0px;
}

#content-inner {
    margin-left: 20px;
    margin-right: 20px;
    background-color: #FFF;
}

.column_left {
    position: relative;
    left: 0px;
    top: 0px;
    width: 65%;
    margin-right: 5%;
    float: left;
}

我这样创建了一个新的div：

.inlineimage 
{
float: left;
margin-left: 0px;
margin-right: 20px;
margin-bottom: 5px;
margin-top: 3px;
}

然后我将其分配给“ column-left” div中的图像：

<div class="inlineimage">
    <img src="images/myimage.jpg" alt="" />
</div>

但是，图像会停留在列的边框（大约105像素）上。

如何使图像从页面左侧开始保持0 px的空白？

谢谢。

Answer 1

您可以将.inlineimage容器定位到position: relative;，然后将img定位为

.inlineimage > img {
  position: absolute;
  left: 0;
  top: 0;
}

这样，您的图片就会停留在顶部/左侧