在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應該可以做到。