下拉列表上升 - Javascript

Question

这里是我的代码链接：https://jsfiddle.net/zoyf35u9/2/ 我想“日期”下拉列表下降而不是。如果打开下拉列表，我需要其他表单元素才能保持原样。

<meta charset="UTF-8"> 
<style> 

</style> 
<form action="/todo/ajouter/" method="post"> 
    <label for="newtodo">Que dois-je faire ?</label> 
    <input type="text" name="newtodo" id="newtodo" autofocus /> 


    Priorité 
    <select name="priorite"> 
     <option value=5>Très haute</option> 
     <option value=4>Haute</option> 
     <option value=3>Moyenne</option> 
     <option value=2>Basse</option> 
     <option value=1>Très basse</option> 
    </select> 

    Date 
    <select name = "day" onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()" onblur="this.size=0;"> 
     <script language="javascript" type="text/javascript"> 
      for(var d=1;d<=31;d++) 
      { 
       document.write("<option>"+d+"</option>"); 
      } 
     </script> 
    </select> 

    <input type="submit" name="envoyer" /> 
</form> 

感谢

Answer 1

使下拉fixed的position：

<form action="/todo/ajouter/" method="post"> 
    <label for="newtodo">Que dois-je faire ?</label> 
    <input type="text" name="newtodo" id="newtodo" size ="10" autofocus /> 


    Priorité 
    <select name="priorite"> 
     <option value=5>Très haute</option> 
     <option value=4>Haute</option> 
     <option value=3>Moyenne</option> 
     <option value=2>Basse</option> 
     <option value=1>Très basse</option> 
    </select> 

    Date 
    <select name = "day" onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()" id="date-dd" onblur="this.size=0;"> 
     <script language="javascript" type="text/javascript"> 
      for(var d=1;d<=31;d++) 
      { 
       document.write("<option>"+d+"</option>"); 
      } 
     </script> 
    </select> 

    <input type="submit" name="envoyer" /> 
</form> 

和

#date-dd { 
    position: fixed; 
} 

Fiddle。

Answer 2

修改下拉和提交按钮的CSS。

我添加了一个类来提交按钮

<input type="submit" name="envoyer" class = "submitButton"/> 

CSS变化：

#date-dd { 
    position: fixed; 
} 
.submitButton { 
    position:relative; 
    left : 10%; 
}