不移动下方元素的情况下展开带内容的 div

要展开带内容的 div，同时不移动下方元素，可以使用 CSS 的 position 属性来实现。具体的解决方法如下：

1. HTML 结构：

<div class="container">
  <div class="content">
    <!-- 这里是要展开的内容 -->
  </div>
</div>

2. CSS 样式：

.container {
  position: relative;
}

.content {
  display: none;
  position: absolute;
  top: 100%;
  /* 这里可以根据实际需求来设置内容展开的方式和样式 */
}

3. JavaScript 代码：

var container = document.querySelector('.container');
var content = document.querySelector('.content');

container.addEventListener('click', function() {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

以上代码中，我们给父容器 container 设置了相对定位（position: relative），然后给要展开的内容 content 设置了绝对定位（position: absolute），并且设置了 top 属性为 100%，这样 content 就会位于父容器底部的下方。

然后使用 JavaScript 给 container 添加点击事件监听器，当点击 container 时，如果 content 的 display 属性为 none，则将其改为 block，即展开内容；如果 display 属性已经是 block，则改为 none，即折叠内容。

这样就可以实现点击 container 时展开或折叠内容，而不会影响下方元素的位置。