Javascript JS如何固定可折叠元素的位置？

我在我的网页中使用可折叠元素，所以我创建了一个可折叠按钮，我有一些数据

但是，当我按下按钮“打开可协作”时，在图片中，你可以看到中间页面中的框，按下按钮后，“打开”这个元素会下降，这是我不想看到的

例如：

所以你们可以看到并画出页面上的所有元素。所以我不想要这个。 我的代码：

var coll=document.getElementsByClassName（“可折叠”）；
对于（i=0；i

。可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：8px；
文本对齐：居中；
宽度：100%；
边界：无；
大纲：无；
字体大小：15px；
}
.主动，
.可折叠：悬停{
背景色：#555；
}
.内容{
显示：无；
溢出：隐藏；
}

打开
一些数据集数据
一些数据
一些数据

一些数据
一些数据
一些数据
一些数据
一些数据

检查一下……它工作正常

.可折叠{
利润率最高：30%；
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：25%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
左缘：40%；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#f1f1；
}
开放式可折叠
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

通过更改CSS文件修复：

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 8px;
    text-align: center;
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
}

    .active, .collapsible:hover {
        background-color: #555;
    }

.content {
    width: 100%;
    background-color: white;
    position: absolute;
    display: none;
    overflow: hidden;
}

---

这和我的代码一样，在表单中不可见