MarksCode MarksCode - 4 months ago 24
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

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'});