css - 使用 z-index 将输入字段定位在封闭 div 上方

Question

我有一个包含一系列 div 的表单，这些 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/