CSS布局问题：如何将卡片内的星级标签固定在卡片底部？

问题根源 #

• 给.card设置position: relative、.star设置position: absolute后，星级标签会脱离flex布局的文档流，不再参与flex的空间分配。如果没给.star设置明确的定位坐标（如bottom、left），它会停留在原flex流中的位置，无法固定到底部。
• 此外，若卡片内其他flex子元素未设置flex-grow: 1填充剩余垂直空间，这些元素会集中在卡片顶部，绝对定位的星级标签可能和内容重叠，导致布局错乱。

正确解决方案 #

方案1：纯Flex布局实现（推荐） #

利用flex的垂直布局特性，无需绝对定位就能固定星级标签在底部：

1. 给.card设置flex-direction: column，保持height: 350px。
2. 给卡片内的内容容器（标题、描述等的父元素）添加flex-grow: 1，让它填充卡片剩余的垂直空间，星级标签会自动被挤到底部。

示例代码：

.card {
  display: flex;
  flex-direction: column;
  height: 350px;
  /* 补充你的边框、内边距等样式 */
}

.card .content-container {
  flex-grow: 1;
  /* 可选：内容过长时添加overflow: auto实现滚动 */
}

.card .star {
  /* 仅设置自身的边距、字体等样式即可 */
}

方案2：正确使用绝对定位 #

如果必须用绝对定位，需做好以下两点：

1. 给.card设置position: relative，同时添加padding-bottom（值等于星级标签高度+上下间距），避免卡片内容被星级标签遮挡。
2. 给.star设置明确的定位属性，固定在卡片底部的指定位置。

示例代码：

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 350px;
  padding-bottom: 40px; /* 预留星级标签的显示空间 */
  /* 补充你的其他样式 */
}

.card .star {
  position: absolute;
  bottom: 10px;
  left: 10px;
  /* 补充星级标签的宽高、颜色等样式 */
}

内容的提问来源于stack exchange，提问作者Pouya Vaghefi