Плавать пролет над текстовым полем?

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/

Я хочу, чтобы нажать на "нет контактной информации" охватывает слегка так, что она охватывает нижнюю границу текстового поля ... но текстовая область все еще хочет идти сверху. Как я могу обойти это?

Answer 1

Свойство z-index влияет только на элементы, которые были расположены. Добавление position:relative; к textarea и span должно сделать трюк.