CSS：z-index虽然在图库中使用了float：left

Question

我有一个包含随机生成内容的图片库：定位这些图片的CSS是：

.item {
  width: 200px;
  margin: 10px;
  float: left;
}

我有一些JQuery在库中随机选择其中一个图像，并使用.addClass并跟随CSS加倍其长度：

.frontpageimagelong {
    height: 200px;
    width: 420px;
}

麻烦是在下图中隐藏了较长的图像。我需要将它覆盖或显示在下面的图像上方。

我考虑过使用Z-Index：

.item {
  width: 200px;
  margin: 10px;
  float: left;
  position: relative;
  z-index: 1;
}

.frontpageimagelong {
height: 200px;
width: 420px;
position: relative;
z-index: 99;
}

但这并没有改变任何事情。有没有人有任何关于这个的好方法的建议？感谢

编辑：添加问题图片：

Answer 1

感谢大家的帮助。我没有解决这个问题，但我解决了这个问题。我使用一些JQuery来查找longimage右侧的图像，然后再次使用JQ删除图像。所以.item div实际上仍然存在，只是没有图像，因此是不可见的