Javascript 如何在第一节高度增加的情况下保持第二节的位置不变

请检查这把小提琴，并告诉我如何保持第二把

在同一位置，即使第一把

的高度增加。如果第一个

与第二个重叠就可以了。我只是不想让第二个div移动

主要


附属的
函数扩展高度（）{
$（#main div”）.animate（{height:“200px”}，400）；
}
函数约化重量（）{
$（#main div”）.animate（{height:“100px”}，400）；
}

谢谢。

使用CSS，您可以使用

#主要部门{
位置：绝对位置；
}

---

这样做将允许两个div在浏览器窗口中自由移动，而不会相互影响。

如果您只想阻止第二个div移动，那么一些简单的css就可以了。只需将其添加到第二个div的style属性中：

position:absolute; top:130px;

尝试类似的答案：

CSS:

<style>
    #main-div {
      position: absolute;
    }
</style>

position:absolute; top:130px;

.userWrap {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 50px;
    overflow: visible;
    z-index: 1;
}
.userWrap:hover {
    z-index: 2;
}
.user {
    position: absolute; 
    display: inline-block;
    width: 300px;
    height: 50px;
    margin-bottom: 5px;
    background: #fff;
    transition: width 0.3s, height 0.3s;
}
.user:hover {
    width: 350px;
    height: 200px;
    background: #eee;
    transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}
.user img {
    float: left;
}
.user .name, .skills {
    margin-left: 5px;
}
.user .name {
    font-size: 21px;
    font-weight: bold;
}