I'd like to have a hidden
element on my page to handle user input while displaying it in a custom way. I thought I'd be able to do this by giving it a lower z-index than the element I'm hiding it behind (yes, the element is positioned too) . Indeed, the
is hidden appropriately. However... when enough text is entered to necessitate a scrollbar, the resize handle (grip) icon shows up on top of the masking
! (At least, on chrome.)
Here's a jsfiddle
to play around with.
How can I stop this from happening? The handle doesn't actually allow resizing, so it seems very odd it would pop to the top depending on content length.
Additionally, is there a more canonical way of hiding a text input field?