divのテキスト入力を下に移動

Question

私はdiv内に2つのもの、ヘッダーとタイプtextの入力を持っています。ヘッダーについては、positionrelativeとし、そのtopを10%に設定しました。これは予想どおりに下に移動しました。しかし、私はここに示したように、それは、下に移動されていない入力ボックスと同じことしようとすると：これはゲームのためにuserscriptであるため、要素とその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

入力要素がインライン要素であるためです。 CSSにdisplay: blockを追加してください。

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

そしてposition: relativeが設定しtopは、そのコンテナの上端に比べ、要素はそれ以外に置かれていたであろう場所に相対的でない意味することに注意してください - あなたが入力の60％になりたい場合はあなたがそれを変更する必要があるdivを含む方法をposition: absoluteに変更します。