MarksCode MarksCode - 1 year ago 73
Javascript Question

Move text input down in div

I have a div with two things inside, a header and an input of type

text
. For the header I made its
position
relative
, then set its
top
to
10%
which moved it down as I expected. However when I try do the same with the input box it's not being moved down, as shown here:

Div

The elements and their css are all created using jQuery since this is a userscript for a game. Here is that part of the code:

var prompt = document.createElement('h1');
$(prompt).css({'color':'#E6E6FA', 'font-family':'Palatino Linotype', 'position':'relative', 'top':'10%'}).text('Enter your TagPro name');
var nameField = document.createElement('input');
$(nameField).attr({'id':'nameField', 'type':'text'}).css({'position':'relative','top':'60%','font-size':'20px'});
$(nameDiv).append(prompt, nameField);


As seen, the
position
of both elements are
relative
, but only the header seems to be moving down. Can someone please help me understand why this is?

Answer Source

It's because your input element is an inline element. Add display: block to its CSS.

$(nameField)
  .attr({'id':'nameField', 'type':'text'})
  .css({'display':'block','position':'relative','top':'60%','font-size':'20px'});