div的绝对定位

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

添加顶级属性

这是我尝试过的作品，您必须像图片的-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;
  }

DEMO

Answer 2

元素应放在外面，如果它应该在外面 - 让我们试着避免负边距等。

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

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 Demo

Answer 4

小代码 - 小提琴http://jsfiddle.net/52YtG/

<div class="mainDIV">
    <div class="miniMe"></div>
</div>

CSS

.mainDIV {
    position:relative;
    left:20px; { or to make a space for element - margin-left:20px; }
    top:20px;
    width:300px;
    height:300px;
    background:blue;
}
.miniMe {
    position:absolute;
    top:0px;
    left:-10px;
    width:10px;
    height:10px;
    background:red;
}