css 更改大小会通过 move 其余的 div 来影响

Question

如果有人可以帮助我解决灰色框悬停时通过进一步向下 move 黄色和红色框而影响它们的问题。我不希望这种情况发生，只希望灰色框改变其大小。

代码如下:

HTML

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>

CSS

.st {
    height: 100px;
    width: 100px;
    background-color:gray;
}
.st:hover {
    height: 110px;
}
.sot {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:yellow;
}
.sots {
    margin-top: 2%;
    height: 100px;
    width: 100px;
    background-color:red;
}

http://jsfiddle.net/khqxd0mr/1/

感谢您提供任何解决方案， CP

Answer 1

将 margin-bottom: -10px 添加到 .st:hover 您正在破解 CSS 框模型以保留位置。 -10px 相对于扩展高度 110px。

Updated JSfiddle

.st {
  height: 100px;
  width: 100px;
  background-color: gray;
}
.st:hover {
  height: 110px;
  margin-bottom: -10px;
}
.sot {
  margin-top: 2%;
  height: 100px;
  width: 100px;
  background-color: yellow;
 
}
.sots {
  margin-top: 2%;
  height: 100px;
  width: 100px;
  background-color: red;
 
}

<div class="st"></div>
<div class="sot"></div>
<div class="sots"></div>