Jquery 在div中向下移动文本输入

我有一个div，里面有两个东西，一个标题和一个

text

类型的输入。对于收割台，我将其

位置设置为相对位置，然后将其
顶部设置为
10%
，从而按照我的预期将其向下移动。但是，当我尝试对输入框执行相同操作时，它不会向下移动，如下所示：


元素及其css都是使用jQuery创建的，因为这是游戏的用户脚本。以下是该部分代码：

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

如图所示，两个元素的
位置
都是相对的，但只有标题似乎在向下移动。有人能帮我理解为什么会这样吗？
这是因为您的输入元素是内联元素。将
display:block
添加到其CSS中

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

请注意，
position:relative
表示您设置的
top
是相对于元素原本放置的位置，不是相对于其容器的上边缘-如果希望输入位于包含div的60%，则需要将其更改为
position:absolute
，因为输入元素是内联元素。将
display:block
添加到其CSS中

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

请注意，
position:relative
表示您设置的
top
是相对于元素原本放置的位置，不是相对于其容器的上边缘-如果您希望输入位于包含div的60%，则需要将其更改为
位置：绝对
为什么不为样式表中的这些元素创建类，然后在创建它们时添加类。使用内联样式创建元素在我看来不是最好的方法——而且——与输入相关的文本应该是它的标签——这不是一个好主意——为什么要使用jQuery而不仅仅是css？添加一个JSFIDLE，这样我们可以更好地提供帮助。这是一个只能使用1个js文件的脚本。为什么不为样式表中的这些元素创建类，然后在创建它们时添加类呢。使用内联样式创建元素在我看来不是最好的方法——而且——与输入相关的文本应该是它的标签——这不是一个好主意——为什么要使用jQuery而不仅仅是css？添加一个JSFIDLE，这样我们可以更好地提供帮助。这是一个只能使用1个js文件Nice的脚本，我也会使用
$（“”，{}）像Nice一样使用
$（“”，{}）像Nice一样使用
$（“”，{}）一样使用
$