浮在textarea上？

Question

HTML：

<div class="no-contact-info">
    <textarea></textarea>
    <span>no contact info</span>
</div>

的CSS：

.no-contact-info {
    width: 400px;
}

.no-contact-info textarea {
    width: 100%;
    border-width: 1px;
    border-style: solid;

    border-right-color: #dbdfe6;
    border-bottom-color: #e3e9ef;
    border-left-color: #e7e8ed;
    border-top-color: #abadb3;    

    z-index: 2;
}

.no-contact-info span {
    display: block;
    background:#FFFFC6 url(/media/icons/error.png) no-repeat 4px center;

    padding: 2px 0 1px 24px;

    color: #333333;
    font-size: 12px;
    font-weight: bold;

    border: 1px solid #abadb3;
    border-top-color: red;
    width: 200px;
    margin-top: -3px;
    z-index: 1;


    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
}

查看：http://jsfiddle.net/XurSz/

我想将“无联系信息”略微向上推，以便它覆盖textarea的底部边框......但是textarea一直想要超越。我怎么能绕过这个？

Answer 1

z-index属性仅影响已定位的元素。将position:relative;添加到textarea和span应该可以解决问题。