textarea with fixed inner placeholder

Question

I'm trying to create a textarea that has a fixed title at the top left corner. So far I have the following:

<div style="position: relative">
    <div style="position:absolute; top:3px; left:3px; font-size:9px; line-height:10px">My Notes:</div>
    <textarea rows="9" style="padding-top:12px"></textarea>
</div>

The issue is that the text in the textarea will overlap the title if the textarea contains enough text that it becomes scrollable.

Is it possible to avoid this with a sort of fixed padding-top?

Answer 1

You can't prevent it from scrolling behind with CSS unless you disable the scroll function. To make it look nicer, just add some more CSS, most importantly, a background. Set the width to 100% and add some padding to make it fit nice. And finally, top: 1px so you still have the top border of the form visible.

position:absolute; 
top:1px; 
left:3px; 
font-size:9px; 
line-height:10px;
background: #fff;
width: 100%;
padding: 5px;