Абсолютное позиционирование из 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

элемент должен быть размещен снаружи, если он должен быть вне - давайте стараться избегать отрицательных полей и т.д ..

Попробуйте установить 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; 
    } 

DEMO

Answer 3

Малый код - скрипку 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; 
} 

Answer 4

Если вы хотите абсолютный позиционируемый элемент для размещения за пределами родителя, то вы можете установить слева, как -ve значение, как left:-35px; и с аналогичным + ve значением margin-left родительского контейнера.

Вы можете попробовать этот 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