在div中向下移动文本输入

Question

我有一个内部有两个东西的div，一个标题和text类型的输入。对于标题我创建了position relative，然后将其top设置为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);

如图所示，两个元素的position都是relative，但只有标题似乎向下移动。有人可以帮我理解为什么会这样吗？

Answer 1

这是因为你的input元素是一个内联元素。将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。