html里面两个同级元素默认第二个元素不占位不显示第一个元素点击的时候显示不使用display：none

可以使用visibility属性来实现这个效果。

首先，设置第二个元素的visibility为hidden，这样它就不会显示，但是仍然会占据空间。

然后，给第一个元素添加一个点击事件，点击时将第二个元素的visibility设置为visible。

HTML代码：

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

CSS代码：

.container {
  position: relative;
}

.element1 {
  position: absolute;
  top: 0;
  left: 0;
}

.element2 {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

JavaScript代码：

const element1 = document.querySelector('.element1');
const element2 = document.querySelector('.element2');

element1.addEventListener('click', () => {
  element2.style.visibility = 'visible';
});

在这个例子中，我们将两个元素的position属性设置为absolute，这样它们就可以重叠在一起。然后，给它们的父元素container设置position: relative，这样它们的定位就是相对于container而言的。

当点击element1时，我们使用JavaScript将element2的visibility设置为visible，这样它就会显示出来。由于它的position是absolute，它会覆盖在element1的上面，从而实现了我们想要的效果。