Javascript选择下面的下拉内容移动

我想调整下拉选择菜单的高度，并在下拉菜单中将大小设置为10。但是，这会导致“选择”菜单下的所有内容向下移动10行。我希望选择菜单中的选项显示在前台，或者只是它不会导致下面的内容移动

<select id="particle" onfocus='this.size=10;' onblur='this.size=1;'>
<option value="angryVillager">angryVillager</option>
<option value="barrier">barrier</option>
<option value="blockcrack">blockcrack</option>
<option value="blockdust">blockdust</option>
<option value="bubble">bubble</option>
<option value="cloud">cloud</option>
<option value="crit">crit</option>
<option value="damageIndicator">damageIndicator</option>
<option value="depthsuspend">depthsuspend</option>
<option value="dragonbreath">dragonbreath</option>
<option value="dripLava">dripLava</option>
<option value="dripWater">dripWater</option>
<option value="droplet">droplet</option>
<option value="enchantmenttable">enchantmenttable</option>
<option value="endRod">endRod</option>
<option value="explode">explode</option>
<option value="fallingdust">fallingdust</option>
<option value="fireworksSpark">fireworksSpark</option>
<option value="flame">flame</option>
<option value="footstep">footstep</option>
<option value="happyVillager">happyVillager</option>
<option value="heart">heart</option>
<option value="hugeexplosion">hugeexplosion</option>
<option value="iconcrack">iconcrack</option>

愤怒的村民
障碍
块状裂纹
块状粉尘
气泡
云
暴击
损伤指示器
深度暂停
龙息
德里普拉瓦
滴水
液滴
附魔台
端杆
爆炸
落尘
火工公园
火焰
脚步
快乐农民
心
大爆炸
iconcrack

---

一个简单的解决方案是将选择器的位置设置为绝对位置，然后用css移动元素下方的所有元素 属性

top

。您还可以使用隐藏元素向下移动

选择下的所有元素（请参阅Ufuk Akoguz答案）

看看这个例子

编辑1

要在用户单击某个选项时关闭选择器，只需在onclick回调中添加

<select id="particle" onfocus='this.size=10;' onblur='this.size=1;' onclick='this.size=1'>


我希望这会有所帮助
div{
边界：无；
高度：29px；
填充物：5px；
宽度：268px；
}

愤怒的村民
障碍
块状裂纹
块状粉尘
气泡
云
暴击
损伤指示器
深度暂停
龙息
德里普拉瓦
滴水
液滴
附魔台
端杆
爆炸
落尘
火工公园
火焰
脚步
快乐农民
心
大爆炸
iconcrack
某些内容
此外，当我单击“选择”菜单中的某个选项时，仅当我在“选择”菜单外单击时，大小不会返回到1行menu@AlanLarimer你应该将此作为答案发布。
<select id="particle" onfocus='this.size=10;' onblur='this.size=1;' onclick='this.size=1'>