css изменить размер влияет на перемещение остальной части divs

Question

Пожалуйста, если кто-то может помочь мне решить проблему, что серый ящик, когда он парит, влияет на желтый и красный прямоугольники, перемещая их дальше вниз. Я не хочу, чтобы это произошло, только серый ящик, чтобы изменить его размер.

Вот код:

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>

Answer 2

Вы можете использовать преобразование

.st { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color:gray; 
 
    transform-origin:center top; 
 
} 
 
.st:hover { 
 
    transform: scaleY(1.1); 
 
} 
 
.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>