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

可以使用CSS的transform属性中的translate()方法来实现元素的移动。具体实现如下：

HTML代码：

<div class="parent">
  <div class="child-1" onclick="showChild2()">点击显示子元素2</div>
  <div class="child-2">子元素2</div>
</div>

CSS代码：

.parent {
  position: relative;
}

.child-1 {
  cursor: pointer;
}

.child-2 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%, 0);
  transition: transform 0.5s ease;
}

.show {
  transform: translate(0, 0);
}

JavaScript代码：

function showChild2() {
  var child2 = document.querySelector('.child-2');
  child2.classList.add('show');
}

首先，将父元素设置为相对定位，这样子元素2就可以相对于父元素进行定位。然后，给子元素1设置一个点击事件，点击时调用showChild2()函数。该函数通过querySelector()方法获取子元素2的元素节点，然后给其添加show类名。show类名会触发一个transform属性的变化，将子元素2从左侧移动到右侧，从而实现显示的效果。同时，为了使移动更加平滑，给子元素2的transform属性添加了一个transition属性。