How to move Virtual Keyboard on top of input field?

Question

I have used jquery virtual keyboard and I want to display keyboard on top of the text field. I have tried to set through position.

JQuery

$('#test').keyboard({ layout: 'qwerty', usePreview: false,position: {
        // null = attach to input/textarea;
        // use $(sel) to attach elsewhere
        of: null,
        my: 'left top',
        at: 'left top',
        // used when "usePreview" is false
        at2: 'left top'
} });

HTML

<p style="height:200px" >
content
</p>
<input type="text" class="form-control" id="test" placeholder="test" autocomplete="off">

Here is the demo url http://jsfiddle.net/bhumi/rzrjw15h/1/ .

I have also tried to set position like

position : {
            of : '#searchterms',        // when null, element will default to kb.$keyboard
            my : 'top', // 'center top', (position under keyboard)
            at : 'top-200',  // 'center bottom',

        }

Answer 1

Working Fiddle

Try:

$('#test').keyboard({
  layout: 'qwerty',
  usePreview: false,
  position: {
    of: null,
    at2: 'top-100'
  }
});

Answer 2

see jsfiddle

$('#test').keyboard({ layout: 'qwerty', usePreview: false,
  position: {
    my: 'center bottom',
    at: 'center bottom',
    // used when "usePreview" is false
    at2: 'center top'
  }
});