CSS過渡位於具有相對位置或絕對位置的元素下

Question

爲什麼當您將元素設置爲相對或絕對位置時，具有過渡元素位於此元素下，但是當刪除位置屬性時，它位於前面？

http://jsfiddle.net/yfvbeLct/1/

HTML：

<div class='square'></div> 
<div class='text'>Text here</div> 

CSS：

.square { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    transition: all 0.5s 0.1s linear; 
    position: absolute; 
    margin-top: 20px; 
} 
.square:hover { 
    margin-top: -50px; 
} 
.text { 
    position: relative; 
} 

Answer 1

不要忘記z-index屬性設置爲您的樣式當u決定宣佈position。

試試例如z-index:10爲您的.square框。這裏正在演示 - JSfiddle

這裏是很好的教程，瞭解它是如何工作 - Stacking context