展开div而不按下div

Question

所以，我有这个代码扩展div高度以显示带有转换的隐藏div。

问题是扩展主div时推下面的div。我知道绝对或甚至亲戚的位置可以做到，但我无法弄清楚我必须把代码放在哪里。

我尝试了一些事情，但没有一个能够奏效，如果有人能提供帮助，我将感激不尽。

JSFiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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;
}

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;