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

【问题标题】：How to overlap one div over another div without position如何在没有位置的情况下将一个 div 重叠在另一个 div 上
【发布时间】：2020-04-03 03:51:24
【问题描述】：

在下面的代码中，我想让 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>

【问题讨论】：

你不能真的不使用位置。我想你的意思是像素位置，例如15px 2em。但是您可以使用诸如absolute 或relative 之类的东西。那么你的意思是没有像素测量，还是根本没有定位？

标签： javascript html css position z-index

【解决方案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>

【讨论】：