绝对定位

Question

我有过

<div id="content" style='position:relative; overflow:auto;'><img id="d"/></div>

#d只是一些设计元素，应该在下面的图片中。无论我尝试什么，它都不会显示出来。

到目前为止，我尝试过的CSS：

display:block;
position:absolute; 
margin-left:-10px; 
left:-10px; 
z-index:999;

​

​

Answer 1

元素应该放在外面，如果它应该在外面的话-让我们尽量避免负边距，等等。

尝试将top设置为您的元素-相对定位和绝对定位必须同时具有垂直(上/下)和水平(左/右)设置。

Answer 2

添加顶属性

这就是我尝试过的工作，你必须像你的图像的-width一样向左设置

<div id="content" style='position:relative;  width:200px; margin:0 auto; background:black; height:100px;'><img id="d" src="http://placehold.it/50x50"/></div>


#d{
    position:absolute; 
    left:-50px;  //width of image
    top:0;
  }

演示

Answer 3

如果希望将绝对定位元素置于父元素之外，则可以将左侧设置为-ve值，类似于left:-35px;，并设置父容器的margin-left的类似+ve值。

您可以试试这个CSS。

#content{ 
    position:relative;
    height:200px; 
    background:black;
    margin-left:35px
}

#d{
    display:block;
    position:absolute; 
    left:-35px; 
    z-index:999;
    background:red;
}

带标记

<div id="content">
  <img id="d" />
</div>

Js Fiddle演示