活跃的手风琴内容推动一切

问题描述

我正在制作这个手风琴：https://codepen.io/rafaelmollad/pen/JjRZbeW 但问题是当我点击一个手风琴项目时，内容会展开并将标题向上推。我注意到如果手风琴不是垂直居中，那么我会得到我想要的结果，但我需要将它居中。 我已将此代码添加到容器中以使其居中，但它不起作用：

 position: absolute;
 top: 50%;
 transform: translateY(-50%)

如果我删除这些行，表单将位于页面顶部，我将得到我想要的结果（容器不在页面中心）

解决方法

像这样更新你的容器类

.container {
  width: 90%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  position: absolute;
  top: 50%;
/*   transform: translateY(-50%); */
}

即删除转换属性，它的工作方式与您想要的完全一样。