0

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>

enter image description here

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

enter image description here

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

user1491636
  • 2,355
  • 11
  • 44
  • 71

1 Answers1

0

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;
Tim
  • 1,680
  • 2
  • 15
  • 21
  • I'm not looking to scroll behind really... more so to push the scrollbar down to leave the upper part untouched. Is that possible? – user1491636 Nov 20 '14 at 01:59
  • The scrollbar is constructed in the shadow DOM, it will take alot of effort to achieve that, not to mention cross-browser compatibility. I'm not sure this will work, but alternatively, you could move the content 50px down by default using Javascript. – Tim Nov 21 '14 at 12:07