javascript - 展开div而不将div推到下面

因此，我有这段代码可扩展div的高度，以显示带有过渡的隐藏div。

问题是扩展主div时会推送以下div。我知道绝对的甚至相对的位置都可以做到，但是我不知道我到底该把代码放在哪里。

我已经尝试了一些方法，但是没有一个起作用，如果有人可以帮助，我将不胜感激。

JSFiddle

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.produtos-destaque {
  width: 200px;
  height: 71px;
  background: rgb(220, 220, 220);
  transition: height .2s ease;
}

.produtos-destaque:hover {
  height: 131px;
}

.titulo-produto-home {
  padding: 20px 20px 0;
}

.produtos-destaque h3 {
  height: 31px;
  overflow: hidden;
  color: rgb(140, 140, 140);
  font-size: 13px;
}

.produtos-destaque:hover .btn-produto {
  opacity: 1;
}

.btn-produto {
  opacity: 0;
  padding: 20px 20px;
  transition: opacity .2s ease;
}

.btn-comprar {
  height: 40px;
  background: #fbbe3f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<div class="produtos-destaque">
  <div class="titulo-produto-home">
    <a href="#">
      <h3>Produto produto produto produto produto</h3>
    </a>
  </div>
  <div class="btn-produto">
    <a href="#">
      <div class="btn-comprar">Comprar</div>
    </a>
  </div>
</div>

<div>I want this to not be pushed</div>

最佳答案

只是CSS中的一个小更新：

.produtos-destaque {
  width: 200px;
  height: 71px;
  background: rgb(220, 220, 220);
  transition: all .2s ease;
  position:relative;
  z-index:1;
}

.produtos-destaque:hover {
  height: 131px;
  margin-bottom:-60px;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.produtos-destaque {
  width: 200px;
  height: 71px;
  background: rgb(220, 220, 220);
  transition: all .2s ease;
  position:relative;
  z-index:1;
}

.produtos-destaque:hover {
  height: 131px;
  margin-bottom:-60px;
}

.titulo-produto-home {
  padding: 20px 20px 0;
}

.produtos-destaque h3 {
  height: 31px;
  overflow: hidden;
  color: rgb(140, 140, 140);
  font-size: 13px;
}

.produtos-destaque:hover .btn-produto {
  opacity: 1;
}

.btn-produto {
  opacity: 0;
  padding: 20px 20px;
  transition: opacity .2s ease;
}

.btn-comprar {
  height: 40px;
  background: #fbbe3f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<div class="produtos-destaque">
  <div class="titulo-produto-home">
    <a href="#">
      <h3>Produto produto produto produto produto</h3>
    </a>
  </div>
  <div class="btn-produto">
    <a href="#">
      <div class="btn-comprar">Comprar</div>
    </a>
  </div>
</div>

<div>I want this to not be pushed</div>