Javascript 使按钮与下拉菜单配合使用'；s动画高度更改

所以，我有一个问题。我想做一个简单的下拉动画，在div原始高度的底部有一个按钮。当我切换一个类时，div的高度会发生变化，我希望按钮始终保持在底部。我该怎么做？代码就在这里：

var btn=document.getElementById（“btn”）；
var div=document.getElementById（“div”）；
函数dropDownAnimation（）{
div.classList.toggle（“下拉菜单”）；
}
btn.onclick=dropDownAnimation

.div{
背景颜色：灰色；
字体系列：Arial；
字号：18px；
宽度：150px；
过渡时间：500ms；
}
.div>按钮{
宽度：50px；
高度：50px；
字体大小：10px；
}
.下拉列表{
高度：300px；
}
#btn{
边缘顶部：15px；
}

Lorem ipsum dolor sit amet，奉献精英。除本协议外的准协议条款。
让我呆在底部！
按我的下拉键

var btn=document.getElementById（“btn”）；
var div=document.getElementById（“div”）；
函数dropDownAnimation（）{
div.classList.toggle（“下拉菜单”）；
}
btn.onclick=dropDownAnimation

.div{
位置：相对位置；
填充底部：50px；
背景颜色：灰色；
字体系列：Arial；
字号：18px；
宽度：150px；
过渡时间：500ms；
}
.div>按钮{
位置：绝对位置；
左：0%；
底部：0%；
宽度：50px；
高度：50px；
字体大小：10px；
}
.下拉列表{
高度：300px；
}
#btn{
边缘顶部：15px；
}

Lorem ipsum dolor sit amet，奉献精英。除本协议外的准协议条款。
让我呆在底部！
按我的下拉列表

正如@Nishant代码片段所示，您不需要JavaScript，只需将其添加到您的主

div

position: relative;

这是你的按钮

position: absolute;
left: 0;
bottom: 0;

var btn=document.getElementById（“btn”）；
var div=document.getElementById（“div”）；
var sty=document.getElementById（“sty”）；
函数dropDownAnimation（）{
div.classList.toggle（“下拉菜单”）；
sty.classList.toggle（'btn_margin'）；
}
btn.onclick=dropDownAnimation

.div{
位置：相对位置；
背景颜色：灰色；
字体系列：Arial；
字号：18px；
宽度：150px；
过渡时间：500ms；
}
.div>按钮{
位置：相对位置；
宽度：50px；
高度：50px；
字体大小：10px；
}
.下拉列表{
高度：300px；
}
.btn_保证金{
利润率最高：67%；
}

Lorem ipsum dolor sit amet，奉献精英。除本协议外的准协议条款。
让我呆在底部！
按我的下拉键

是的，它正在工作，您基本上回答了我的问题，但还没有完全回答。你能找到没有绝对定位的另一种方法吗？谢谢。是的，还有其他选择，但它们不是好的，在css上面我认为很适合。你能告诉我你真正想要实现什么吗？你可以使用

flex

来实现它。您的方法@NishantDixit更简单，但是flex列可以避免重叠。我没有看到相对于父对象的位置！它工作得很好。谢谢如果我在按钮上添加了绝对定位，而没有在父按钮上添加相对定位，那就把一切都搞糟了。干杯哈哈，对不起，我先验证了你的答案，看到了awran5的答案，看到它起作用了，没有验证这个，验证了他的，回来看了你的答案，看到了你的相对位置，没有验证awran5的答案，再次验证了你的答案，哈哈，对不起。