模态窗口关闭按钮定位异常：按钮被窗口区域截断

问题描述 #

模态窗口右上角的X关闭按钮设置了top: -15px和right: -15px，意图让按钮部分悬浮在窗口外，但被窗口区域截断无法完整显示。

原代码示例 #

CSS #

.modal-close {
  z-index: 9999;
  position: absolute;
  display: block;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  border: 0px;
  text-indent: -9999px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.9/cdn.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet">

<section x-data="{showModal: false, showLoading: false, html: ''}">
  <button
    class="flex justify-center animate-grow-on-hover--small cursor-pointer"
    @click="html='loading...'; showLoading = true; showModal = !showModal; 
      fetch('https://phet-dev.colorado.edu/html/build-an-atom/0.0.0-3/simple-text-only-test-page.html', {
        method: 'GET',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        },
      })
      .then(response => response.text())
        .then(text => {
          html = text,
          showLoading = false;
      })"
    >
    click me
  </button>

  <div id="bgMask" class="absolute z-90 inset-0 bg-black opacity-70" x-show="showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-70" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-70" x-transition:leave-end="opacity-0">
  </div>
  
  <div class="relative h-full w-full">
    <div class="fixed z-90 inset-0 overflow-y-auto overflow-x-hidden my-6 md:my-12 mx-auto max-w-5xl w-2/3 md:rounded shadow-2xl bg-white" style="box-shadow: 0 0 10px #000;" x-show="showModal" @click.away="showModal = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
      <div x-show="showLoading" x-transition:leave="transition ease-out duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute h-full w-full inset-0 z-20 flex flex-col justify-center items-center text-gray-600 bg-white">
        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                          viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" class="w-16 h-16 fill-current">
          <path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
            <animateTransform
             attributeName="transform"
             attributeType="XML"
             type="rotate"
             dur="1s"
             from="0 50 50"
             to="360 50 50"
             repeatCount="indefinite" />
          </path>
        </svg>
        Loading&hellip;
      </div>
      
      <!-- Close button -->
      <div class="modal-close z-[100]" @click="showModal = false"></div>
      
      <div x-html="html"></div>
    </div>
  </div>
</section>

解决步骤 #

1. 移除模态窗口的水平溢出隐藏设置：
   模态窗口容器的overflow-x-hidden类会截断水平方向超出容器的内容，正是这个属性导致关闭按钮被隐藏。将该类从模态窗口的class列表中移除，修改后的容器class为：

   fixed z-90 inset-0 overflow-y-auto my-6 md:my-12 mx-auto max-w-5xl w-2/3 md:rounded shadow-2xl bg-white
   

2. 验证定位层级：
   确保关闭按钮的z-index高于模态窗口，原代码中按钮的z-[100]已经高于窗口的z-90，无需额外调整。

3. 确认父容器定位：
   模态窗口容器设置了position: fixed，关闭按钮的position: absolute会相对于该容器定位，这个逻辑是正确的，无需修改。

修改后效果 #

关闭按钮将完整显示在模态窗口右上角的外部区域，不会被容器截断，同时保持原有功能。

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