css position:fixed

there Below is the html code:

<div class="cont">
    <p class="fix">fixed text</p>
</div>
and css:
.cont{position:relative; width:500px; background-color:red; height:2000px;}
.fix{position:fixed; right:0;}

I wan开发者_开发技巧t set the p.fix's right position relative to the .cont element. But the code I applied does not work correct.(it relatives to the body element)

Any suggestions? Thank you very much.

As far as I can make out, the top, bottom, left and right attributes of a position:fixed element are relative to the browser's viewport. It wouldn't make much sense if they worked differently, because position:fixed elements are meant to be in a fixed position in the browser window, regardless of scrolling of the remaining content.

If you want to have the element in a certain position initially, you can wrap it in a div with position:absolute and layout that to be in the desired position instead, and don't aupply top, bottom, left and right attributes for the position:fixed element.