HTML 同级元素隐藏显示动画效果 - 无需 display:none 或 position

可以使用'max-height'和'overflow'来实现这个效果。

首先，将第二个元素的'max-height'设置为0，并设置'overflow:hidden'，这样第二个元素就不会显示也不会占据空间。

然后，给第一个元素绑定点击事件，在点击事件中将第二个元素的'max-height'设置为一个比较大的值，这样第二个元素就会占据空间并显示出来。

为了让这个过渡更加流畅，可以给第二个元素添加过渡效果，比如：

.element2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.element1.clicked + .element2 {
  max-height: 500px;
}

这样在点击第一个元素时，第二个元素就会以0.5秒的时间逐渐展开并占据空间。