How to fix the position of an element inside a div with scroll( With css )

Question

It is possible to fix an element( div, img, p ) in a div with scroll and with position:relative and using only css?

*Currently reposition the div using the function $('elemento').scroll() and calculating the scroolTop() of the element but in IE( the worst browser in the world ) there is a kind of delay and the element gets 'tremendous' so I wonder if it is possible to do this only with CSS.

HTML:

<div class="divContainer">
    <div class="conteudoFixo">
        <h3>Objeto Fixo</h3>
    </div>
    <div class="conteudoNormal">
        <ul>
            <li>Primeira conversa</li>
            <li>Segunda conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>

        </ul>
    </div>
</div>

CSS:

.divContainer {
    height:200px;
    width:300px;
    position:left;
    overflow:auto;
    border: 1px solid #FF0000;
    position: relative;
}

.conteudoFixo {
    position: absolute;
    top:0px;
    left:0px;
    background-color:#FF00FF;
    width:100%;
}

Example link: http://jsfiddle.net/uQLzv/

Answer 1

Put this in your CSS:

.conteudoFixo {
    position: fixed;
    width: 300px;
    background-color:#FF00FF;
}

Answer 2

I would change your css by adding this code to the class conteudoNormal.

.conteudoNormal{
    overflow:auto;
    height:200px;
}

And leave the class divContainer thus:

.divContainer {
    width:300px;
    position:left;
    border: 1px solid #FF0000;
    position: relative;
}

Answer 3

So friend the solution is simple, it makes no sense to leave the .conteudoFixo inside a scroll div which in the case of your code is the parent div .divContainer ... the wisest would be to let the div q vc want fixed off the scroll, causing only the list items to roll along with the div, so do as I did in your code that I edited.

http://jsfiddle.net/uQLzv/5/

Explaining the issue:

1- The div .divContainer no longer owns the property height, remains relative, and within it follow 2 Ivs, a .conteudoFixo and .conteudoNormal ... both own the property float:left along with width:100%, in this way one is below the other in the order of its HTML markup.

2- The div .conteudoFixo just has a css styling to give beauty, style as you prefer.

3- Already the div .conteudoNormal, pay attention ... THIS DIV WHO MUST OWN THE PROPERTY overflow:auto along with height: <Valor_que_vc_preferir>, this div will contain the items that will scroll in the box