html里面两个同级元素默认第二个元素不显示也不占据空间第一个元素点击的时候第二个元素占据空间并显示不使用display：none和visibility以及position还有opacity并且不使用宽高不使用scale不使用translate

可以使用opacity和pointer-events属性来实现该效果。

首先，将第二个元素的opacity设置为0，使其不可见。然后，给第一个元素绑定点击事件，当点击时将第二个元素的opacity设置为1，并将pointer-events设置为auto，使其可以响应鼠标事件。

HTML代码：

<div class="box">
  <div class="element1">Element 1</div>
  <div class="element2">Element 2</div>
</div>

CSS代码：

.box {
  position: relative;
}

.element1 {
  background-color: red;
}

.element2 {
  background-color: blue;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.element1.clicked + .element2 {
  opacity: 1;
  pointer-events: auto;
}

JS代码：

const element1 = document.querySelector('.element1');
element1.addEventListener('click', function() {
  element1.classList.add('clicked');
});

当element1被点击时，会给它添加一个clicked类，这个类在CSS中用于选择element1的同级后续元素（即element2），从而实现让element2显示并占据空间的效果。