从顶部而不是从底部增加div的高度可以通过以下几种方法实现：

1. 使用绝对定位：将div的position属性设置为absolute，并设置top属性来控制div的位置。然后通过改变top属性的值来增加div的高度。例如：

div {
  position: absolute;
  top: 0;
  height: 100px;
  width: 100%;
  background-color: #f0f0f0;
  transition: top 0.3s ease;
}

div:hover {
  top: -50px;
}

1. 使用负边距：将div的margin-top属性设置为负值来增加div的高度。例如：

div {
  height: 100px;
  width: 100%;
  background-color: #f0f0f0;
  transition: margin-top 0.3s ease;
}

div:hover {
  margin-top: -50px;
}

1. 使用transform属性：将div的transform属性设置为translateY来改变div的位置，从而增加div的高度。例如：

div {
  height: 100px;
  width: 100%;
  background-color: #f0f0f0;
  transition: transform 0.3s ease;
}

div:hover {
  transform: translateY(-50px);
}

以上方法可以根据具体需求选择使用，它们都可以实现从顶部而不是从底部增加div的高度效果。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc