Hostinger网站折叠框展开无法推动元素，寻求修复或替代方案

问题背景 #

使用Hostinger搭建的网站，此前通过嵌入代码实现的点击展开折叠框功能正常。近期Hostinger更新图片编辑功能后，折叠框位于图片上方，展开时文本被图片遮挡，且无法推动图片下移；尝试更换折叠框代码、添加!important标签、修改为inline-block属性均未解决问题。

具体修复方法 #

1. 解决层级遮挡问题 #

给折叠框内容容器添加层级属性，确保它在图片上方：

.content {
  position: relative; /* z-index需配合定位属性生效 */
  z-index: 10;
}

同时检查图片容器的定位，避免它脱离文档流：

/* 替换为你网站中图片所在容器的类名 */
.image-container {
  position: relative;
  z-index: 1; /* 层级低于折叠框内容 */
}

2. 改用高度过渡替代display切换（彻底解决无法推动元素问题） #

display: block/none的切换会导致元素瞬间显示/隐藏，容易出现文档流异常。改用max-height过渡可以保证元素展开时正常推动下方图片：

修改后的完整代码

HTML：

<button class="collapsible">点击展开/收起内容</button>
<div class="content">
  <p>text here</p>
</div>
<!-- 下方的图片容器 -->
<div class="image-container">
  <img src="你的图片链接" alt="图片描述">
</div>

CSS：

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  position: relative;
  z-index: 10;
}

.image-container {
  position: relative;
  z-index: 1;
  margin-top: 12px; /* 可选，增加折叠框和图片的间距 */
}

JavaScript：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    // 通过max-height控制展开/收起
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

3. 强制重置图片的异常样式 #

如果Hostinger自动给图片添加了float或absolute定位，强制重置：

.image-container img {
  float: none !important;
  position: relative !important;
}

内容的提问来源于stack exchange，提问作者Ariel