Float a span over a 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;
}

view: http://jsfiddle.net/XurSz/

I want to push the "no contact info" span up slightly so that it covers the bottom border of the textarea... but the textarea keeps wanting to go overtop. How can I get around this?

Answer 1

The z-index property only affects elements that have been positioned. Adding position:relative; to the textarea and the span should do the trick.