html里面两个同级元素默认第二个元素不显示也不占据空间第一个元素点击的时候第二个元素占据空间并显示不使用display：none和visibility

：hidden的情况下，可以通过改变第二个元素的位置来实现。可以将第二个元素的位置设为绝对定位，并将其放在第一个元素的下方，然后在第一个元素被点击时，将第二个元素的位置设为相对定位，使其占据空间并显示。具体实现方法如下：

HTML代码：

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

CSS代码：

.wrapper {
  position: relative;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 100%;
  left: 0;
}

.box2.show {
  position: relative;
}

JavaScript代码：

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

box1.addEventListener('click', function() {
  box2.classList.add('show');
});

在上面的代码中，我们将第二个元素的位置设为绝对定位，并将其放在第一个元素的下方（通过top: 100%和left: 0实现）。当第一个元素被点击时，我们使用JavaScript代码给第二个元素添加一个show类，该类将第二个元素的位置设为相对定位，使其占据空间并显示。