如何在没有位置的情况下将一个 div 重叠在另一个 div 上

Question

在下面的代码中，我希望在单击div1 时使div1 与div2 重叠。我该怎么做而不使用位置？我还想通过仅更改 div1 的 css 来实现此目的。提前致谢。

<style>
.div1
{ display:'inline-block';}
.div2
{display:'inline-block';}
enter code here
</style>
<script>
function thefunc()
{
//code to overlap div2 from div1 by only changing css of div1
}

<body>
<div id='div1' onClick={()=>thefunc()}></div>
<div id='div2'></div>
</body>

Answer 1

考虑将 CSS-Grid 应用于 body

function thefunc() {
  document.querySelector('body').classList.add('overlap');
}

#div1 {
  display: inline-block;
  background: red;
  opacity: .5;
}

#div2 {
  display: inline-block;
  background: blue;
}

div[id] {
  width: 200px;
  height: 200px;
}

.overlap {
  display: grid
}

.overlap div {
  grid-row: 1;
  grid-column: 1;
}

#div1 {
  z-index: 2;
}

<div id='div1' onClick="thefunc()"></div>
<div id='div2'></div>

如何在没有位置的情况下将一个 div 重叠在另一个 div 上

How to overlap one div over another div without position

html

javascript

css

position

z-index