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时，不要忘记将position属性设置为您的样式。

试试z-index:10框中的.square示例。这是工作演示 - JSfiddle

以下是了解其工作原理的好教程 - Stacking context