线性渐变影响元素z-index

Question

任何人都可以向我解释为什么我无法将搜索元素放在这个页面的前面：http://blog.uniplaces.com/author/sebastiaan/（也就是线性背景的前面）。我可以通过搜索按钮来执行此操作：

.some_element { z-index: 1; }

但对于其他元素，它不起作用。似乎线性渐变导致了这种情况。因为如果我将z-index -1添加到：

.error-content:after { z-index: -1; }

整个渐变消失，但表单元素按计划运行。

.error-content.not-found {
    background: url(http://www.uniplaces.com/dist/img/static/not-found.jpg) center/cover no-repeat;
}
.error-content:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background-image: -webkit-linear-gradient(left, #363636 0, rgba(0, 0, 0, .9) 15%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .9) 85%, #363636 100%);
    background-image: linear-gradient(to right, #363636 0, rgba(0, 0, 0, .9) 15%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .9) 85%, #363636 100%);
}