求助：如何在CSS中垂直堆叠已旋转的popup-text与close元素

先把代码里的问题逐一修正，再调整布局实现需求：

修正后的完整代码 #

HTML #

<div class="popup">
  <a target="_blank" href="#">
    <p class="popup-text"> Save 20% | </p>
  </a>
  <a target="_blank" href="#">
    <p class="close">+</p>
  </a>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.popup {
  background-color: #f48277;
  width: 70px;
  height: 200px;
  position: fixed;
  right: 0;
  bottom: 30vh;
  border-radius: 70px;
  display: flex;
  flex-direction: column; /* 改成垂直排列 */
  align-items: center;
  justify-content: center;
  gap: 15px; /* 控制两个元素的垂直间距 */
}

.close {
  transform: rotate(45deg);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 26px;
  line-height: 1; /* 去掉默认行高的干扰 */
}

.popup-text {
  color: white;
  font-size: 26px;
  font-weight: bold;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1; /* 统一行高保证对齐 */
}

核心修改说明 #

1. 修复非法HTML结构：原代码里a嵌套a不符合规范，直接拆分两个独立的a标签，避免浏览器解析异常。
2. 换用垂直Flex布局：把.popup的flex-direction设为column，直接让内部元素垂直堆叠，比inline-block更可靠——因为旋转不会改变元素的盒模型，Flex能基于原始盒模型实现精准排列。
3. 消除行高干扰：给两个p元素加line-height: 1，避免默认行高导致的上下偏移，保证对齐精度。
4. 精准控制间距：用gap属性直接设置两个元素的垂直距离，比手动调margin更直观可控。

如果需要微调对齐位置，直接调整gap值或者给单个元素加margin即可，旋转样式完全保留不影响布局。

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