Позиционирование поля ввода над охватывающим div с z-индексом

Question

У меня есть форма с серией div, охватывающей отдельные строки данных и входов внутри этих div. Я хотел бы сделать входы в CSS как «близкие» символы, но я не могу позиционировать их «сверху» в верхнем левом углу, используя отрицательные поля или отрицательную позицию. Z-index, похоже, не делает этого трюка ... они заканчиваются не скрытыми в окружающей белой области.

<div class="item-in-cart"> 
<input type="submit" name="delete[1]" class="delete" value="elimina"> 
</div> 
<div class="item-in-cart"> 
<input type="submit" name="delete[2]" class="delete" value="elimina"> 
</div> 
[...] 

.item-in-cart { 
width: 330px; 
overflow: hidden; 
border: 1px dashed #222; 
margin-bottom: 20px; 
padding: 15px; 
position: relative; 
} 
.item-in-cart .delete { 
display: block; 
width: 25px; 
height: 25px; 
background: url(/assets/images/delete.png) no-repeat 0 0; 
text-indent: -9999px; 
padding: 0; 
border: 0; 
position: absolute; 
top: -12px; 
left: -12px; 
z-index: 200;} 

Почему это так?

Answer 1

Прежде всего, вы захотите закрыть свои элементы div. то вы хотите сделать то, что сказал @adrift о добавлении позиции к входам. то вы заметите, что, пока ваше позиционирование, z-index работает, они не выходят за верхние левые, потому что у вас установлен overflow:hidden. вытащите это, и там я пойду. вот скрипка: http://jsfiddle.net/jalbertbowdenii/CpmdV/1/