如何在不影响css中其他div的情况下调整div的大小

我正在开发一个应用程序，我的页面中有很多基本上是div的tile。我想修改div的hover属性以放大它。我当前的css是这样的：

 .livetile{
   height: 110px;
   margin: 5px;
   padding: 0px;
   width: 110px;
   position: absolute;
   transition:width 2s;
   -webkit-transition:width 2s;
  }

 .live-tile:hover{
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -moz-box-shadow: 0 0 3px 1px #fff;
   -webkit-box-shadow: 0 0 3px 1px #fff;
   box-shadow: 0 0 3px 1px #333;
 }

缩放效果似乎很好。但是，如果不进行缩放，而是尝试显式调整div的大小，如下所示：

 .live-tile:hover{
    width:200px;
    height:200px;
  }

然后，围绕悬停div的瓷砖被重新定位以容纳它。然而，我希望它能走到最前面，产生某种弹出式的效果，而不会让其他div重新定位

换句话说，我不想只是缩放显示，我只想更改div的尺寸，这样即使它与其他div重叠，它也只会出现在前面，而不会替换任何其他div

我还尝试将悬停div的

z-index

设置为一个更高的整数值，但它似乎仍然没有奏效。我刚刚开始尝试CSS转换和动画。非常感谢您的帮助

编辑 我试着用一个简单的例子来说明我遇到的问题。我不想让其他div调整大小。我希望我能解释清楚

---

注意-我只想要CSS解决方案。我知道这可以通过Jquery实现。

您可以增加#holder的width（或）max width属性

---

检查此处：

尝试在模具悬停效果上使用z索引。如果您想与其他项目重叠，这应该是可行的…（必须设置posistion！）

您可以设置JSFIDLE吗？你不应该有这个问题，当一个元素被绝对定位时，它会被移出文档流，不会影响其他元素的布局。缩放不同于显式调整大小。如果缩放有效，为什么不坚持缩放呢？我不希望任何其他div的大小被调整。我只希望我悬停的那个div被激活，与其他div重叠，然后弹出。我不想增加

支架的宽度来适应div大小的增加
#holder{
max-width: 650px;
height: 160px;
display: block;
overflow: hidden;
position: relative;
z-index: 20;
}