为弹出层添加关闭按钮（置于overflow:hidden元素外部）

我太懂这种郁闷了！本来以为是个小需求，结果被overflow:hidden卡得没脾气，还不想为了个按钮写一堆jQuery代码。其实不用复杂的JS，靠CSS定位就能轻松搞定，给你两个方案选：

方案一：调整结构（推荐，最稳妥） #

核心思路是把关闭按钮和带overflow:hidden的弹出层放在同一个父容器里，让按钮脱离overflow:hidden的影响范围。

HTML结构调整： #

<div class="popup-container">
  <!-- 原来带overflow:hidden的弹出层容器 -->
  <div class="popup-wrapper">
    <div class="popup-content">
      <div class="item">
        <h3>HELLO</h3>
      </div>
    </div>
  </div>
  <!-- 把关闭按钮移到外面，和popup-wrapper同级 -->
  <span class="closeme">×</span>
</div>

CSS样式： #

/* 父容器用来定位按钮和弹出层 */
.popup-container {
  position: relative;
  /* 可选：让弹出层居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}

/* 原来的弹出层，保持overflow:hidden */
.popup-wrapper {
  overflow: hidden;
  width: 300px;
  height: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 关闭按钮的样式 */
.closeme {
  position: absolute;
  /* 调整位置，让按钮刚好在弹出层外面 */
  top: -12px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 18px;
  cursor: pointer;
  /* 可选：加hover效果 */
  transition: background 0.2s;
}

.closeme:hover {
  background: #555;
}

这个方案最可靠，因为按钮完全不在overflow:hidden的容器里，所以根本不会被隐藏，代码也极简，完全不用JS。

方案二：不调整结构（适合不想改HTML的情况） #

如果不想动现有结构，可以利用padding和相对定位的小技巧，让按钮“钻”到overflow:hidden的容器外但不被隐藏：

CSS样式： #

.popup-wrapper {
  overflow: hidden;
  /* 给按钮留出空间 */
  padding: 24px;
  width: 300px;
  height: 200px;
  background: #fff;
  border-radius: 8px;
  position: relative;
}

.popup-content {
  /* 让按钮可以相对于这个容器定位 */
  position: relative;
  /* 抵消popup-wrapper的padding，让内容回到原来的位置 */
  margin: -24px;
  padding: 24px;
}

.closeme {
  position: absolute;
  /* 定位到popup-wrapper的外面 */
  top: -24px;
  right: -24px;
  width: 24px;
  height: 24px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 18px;
  cursor: pointer;
}

原理是通过popup-wrapper的padding给按钮留出位置，再用popup-content的负margin抵消padding，保证内容位置不变，最后把按钮定位到padding区域（这个区域不会被overflow:hidden隐藏）。

两种方案都能解决问题，推荐第一种，结构更清晰，后期维护也方便～

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