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

时间:2013-03-11 21:45:13

标签: css input z-index css-position

我有一个带有一系列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;}

为什么会这样?

1 个答案:

答案 0 :(得分:2)

首先,你要关闭你的div元素。然后你想做@adrift关于在输入中添加位置的内容。然后你会注意到,当你的定位时,z-index正常工作,它们不会超过左上角,因为你设置了overflow:hidden。拿出来,然后去吧。这是一个小提琴:http://jsfiddle.net/jalbertbowdenii/CpmdV/1/