如何让内容向上展开而非向下？CSS布局问题求助

我尝试让文本框向上展开，但它总是向下展开。以下是我的代码：

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
}

.div {
  position: relative;
  transition: .35s ease-in-out 0s;
  height: 0;
  width: 70%;
  left: 50%;  
  top: 100px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
}

.text {
  position: relative;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 0 1px black;
  line-height: 155%;
  padding: 0.2em 0.3em;
  color: white;
  background-color: black;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 3px;
  font-size: 1.125rem;
}

<div class="box">
  <div class="div">
    <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

我的目标是无论如何配置，文本框都始终向上展开。我尝试调整height、top和bottom属性，但没有成功，请问我该怎么做？

解决方案 #

要实现文本框向上展开，核心是让容器的底部固定在目标位置，展开时内容向上延伸。具体修改如下：

1. 调整容器定位逻辑 #

把.div的top属性替换为bottom，同时添加overflow: hidden隐藏初始状态下的内容，确保展开时仅向上生长：

.div {
  position: relative;
  transition: .35s ease-in-out 0s;
  height: 0;
  width: 70%;
  left: 50%;  
  bottom: 20px; /* 固定在.box底部上方20px的位置 */
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

2. 固定文本在容器底部 #

将.text改为绝对定位并固定在.div底部，这样展开时文本会向上推动，形成向上展开的效果：

.text {
  position: absolute;
  bottom: 0; /* 固定在.div底部 */
  left: 50%;
  transform: translateX(-50%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 0 1px black;
  line-height: 155%;
  padding: 0.2em 0.3em;
  color: white;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 3px;
  font-size: 1.125rem;
  width: 100%; /* 撑满容器宽度 */
}

3. 添加展开触发逻辑 #

以hover为例，给.div设置展开后的高度（也可以用height: auto自适应内容高度）：

.box:hover .div {
  height: 80px; /* 根据文本内容调整合适高度 */
}

完整修改后的代码 #

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
}

.div {
  position: relative;
  transition: .35s ease-in-out 0s;
  height: 0;
  width: 70%;
  left: 50%;  
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  overflow: hidden;
}

.text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 0 1px black;
  line-height: 155%;
  padding: 0.2em 0.3em;
  color: white;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 3px;
  font-size: 1.125rem;
  width: 100%;
}

.box:hover .div {
  height: 80px;
}

<div class="box">
  <div class="div">
    <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

关键原理 #

• 用bottom替代top锚定容器位置，确保展开起点固定
• overflow: hidden配合初始height:0隐藏内容，展开时增加高度实现向上延伸
• 文本绝对定位在容器底部，展开时自然向上填充空间

内容的提问来源于stack exchange，提问作者zhin dins