如何在一个元素下面显示另一个元素？

在前端开发中，可以使用CSS的定位属性来实现在一个元素下方显示另一个元素。具体有以下几种方式：

1. 使用相对定位（relative positioning）：通过将需要显示在下方的元素的position属性设置为relative，然后使用top、bottom、left、right等属性来调整其位置，使其位于目标元素的下方。示例代码如下：

.target {
  position: relative;
}

.popup {
  position: absolute;
  top: 100%;
}

1. 使用绝对定位（absolute positioning）：通过将需要显示在下方的元素的position属性设置为absolute，然后使用top、bottom、left、right等属性来调整其位置，使其相对于其最近的具有定位属性的父元素进行定位。示例代码如下：

.parent {
  position: relative;
}

.popup {
  position: absolute;
  top: 100%;
}

1. 使用浮动（float）：通过将需要显示在下方的元素使用浮动属性，使其脱离文档流，并通过清除浮动的方式，使其位于目标元素的下方。示例代码如下：

.target {
  float: left;
  clear: both;
}

.popup {
  clear: both;
}

1. 使用flex布局（flexbox）：通过将目标元素和需要显示在下方的元素作为flex容器的子元素，并使用flex-direction属性将其排列在垂直方向上，从而实现在目标元素下方显示另一个元素。示例代码如下：

.container {
  display: flex;
  flex-direction: column;
}

.target {
  /* 其他样式 */
}

.popup {
  /* 其他样式 */
}

以上是几种常见的方式，根据实际需求和布局情况可以选择合适的方法。腾讯云提供的与前端开发相关的产品有云存储COS、CDN加速、云函数等，您可以访问腾讯云官网（https://cloud.tencent.com/）了解更多详情。