html - 在文本区域上 float 一个跨度？

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;
}

View :http://jsfiddle.net/XurSz/

我想将“无联系信息”的跨度稍微向上推，以便它覆盖文本区域的底部边框...但是文本区域一直想越过顶部。我该如何解决这个问题？

Answer 1

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