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