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

当您决定声明position 时，不要忘记为您的样式设置z-index 属性。

例如，为您的 .square 框尝试 z-index:10。这是工作演示 - JSfiddle

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