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

可以使用height和width属性将第二个元素的高度和宽度设为0，然后使用JavaScript在第一个元素的点击事件中将第二个元素的高度和宽度设为实际值。例如：

HTML代码：

<div class="element1" onclick="showElement2()">Element 1</div>
<div class="element2"></div>

CSS代码：

.element1 {
   background-color: blue;
   color: white;
   cursor: pointer;
}

.element2 {
   background-color: red;
   height: 0;
   width: 0;
}

JavaScript代码：

function showElement2() {
   var element2 = document.querySelector('.element2');
   element2.style.height = '100px';
   element2.style.width = '100px';
}

在这个例子中，初始时第二个元素的高度和宽度都为0，点击第一个元素时，JavaScript会将第二个元素的高度和宽度设为100px，使其显示出来并占据空间。