html - 即使 z-index 较大，限制在元素中的图像也会被截断

Question

我有一个从 API 请求生成表格的页面。其中一部分是该项目的图像，我创建了一个图标，当用户将鼠标悬停在该图标上时，它会显示该行的图像。我可能误解了 z-index 的工作原理，但我已将图像 z-index 设置为 99，但它仍然被截断，因为表格所在的元素太小。

/* Card Large */
#sets-individual-page .background .card-large {
  background-color: #283046;
  border-radius: .4rem;
  display: block;
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: auto;
}


/* Tables */
#sets-individual-page .background .box-table {
  margin-bottom: 2rem;
}

#sets-individual-page .background .table {
  color: #fff !important;
  font-size: .8rem;
  border-spacing: 2px;
}

#sets-individual-page .background tr {
  min-height: 2rem;
}

#sets-individual-page .background th,
#sets-individual-page .background td {
  padding: .3rem .5rem .2rem .5rem !important;
  vertical-align: middle;
}

#sets-individual-page .background tr .standard > div,
#sets-individual-page .background tr .foil > div {
  display: inline;
  padding-right: .75rem;
  margin: 0;
}

#sets-individual-page .background tr .standard .btn-icon,
#sets-individual-page .background tr .foil .btn-icon,
#sets-individual-page .background tr .standard .btn-icon .icon,
#sets-individual-page .background tr .foil .btn-icon .icon {
  margin: 0 .2rem;
  text-align: center;
}

#sets-individual-page .background tr .standard input,
#sets-individual-page .background tr .foil input {
  height: 1.25rem;
  width: 2.5rem;
  margin: 0;
  text-align: right;
}

#sets-individual-page .background .table-hover tbody tr:hover td,
#sets-individual-page .background .table-hover tbody tr:hover th {
  color: #f6f6f6;
  background-color: #161d31;
}

#sets-individual-page .background .icon,
#sets-individual-page .background .symbol {
  width: 1rem;
  height: 1rem;
  margin-right: .3rem;
  margin-bottom: .1rem;
}

/* MTG Card Images */
#sets-individual-page .background .large {
  position: absolute;
  display: none;
  left: 20%;
  top: 15%;
}

#sets-individual-page .background .btn-icon:hover + .large  {
  display: block;
  z-index: 999 !important;
}

#sets-individual-page .background .large-image {
  position: absolute;
  border-radius: 1rem;
  z-index: 999 !important;
  width: 18.75rem;
  height: 26.125rem;
}

<div class="card-large">
  <h4 class="">Cards</h4>
  <table class="table table-hover table-sm text-nowrap">
    <thead>
      <tr>
        <th scope="col" style="width: 03%;" class="text-end">
          <h5>#</h5>
        </th>
        <th scope="col" style="width: 25%;" class="">
          <h5>Name</h5>
        </th>
        <th scope="col" style="width: 15%;" class="">
          <h5>Type</h5>
        </th>
        <th scope="col" style="width: 07%;" class="">
          <h5>Rarity</h5>
        </th>
        <th scope="col" style="width: 10%;" class="">
          <h5>Mana Cost</h5>
        </th>
      </tr>
    </thead>
    <tbody id="card-listings">
      <tr>
        <td class="text-end">1</td>
        <td class="">
          <span class="btn-icon btn-icon-primary">
            <img class="icon" src="/static/img/icons/image.png">
          </span>
          <span class="large">
            <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
          </span>
          Chandra, Torch of Defiance
        </td>
        <td class="">Legendary Planeswalker — Chandra</td>
        <td class="">Mythic</td>
        <td class="">
          <img class="symbol" src="/static/img/symbology/2.png">
          <img class="symbol" src="/static/img/symbology/R.png">
          <img class="symbol" src="/static/img/symbology/R.png">
        </td>
      </tr>
      <tr>
        <td class="text-end">2</td>
        <td class="">
          <span class="btn-icon btn-icon-primary">
            <img class="icon" src="/static/img/icons/image.png">
          </span>
          <span class="large">
            <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/8/c/8c1a02f9-3ce7-46e9-8d0e-0d491bb13012.jpg?1593559582" height="500">
          </span>
          Cathartic Reunion
        </td>
        <td class="">Sorcery</td>
        <td class="">Rare</td>
        <td class="">
          <img class="symbol" src="/static/img/symbology/1.png">
          <img class="symbol" src="/static/img/symbology/R.png">
        </td>
      </tr>
      ...
    </tbody>
  </table>
</div>

截屏

编辑：

• 添加了卡片元素的html
• 添加了卡片元素的css

标签： htmlcss

Answer 1

<div class="card-large">您的卡片图像没有像您期望的那样出现在堆栈顶部和容器上方的z-index原因是因为<img>元素相对于 parent是绝对定位的.card-large。由于图像相对于父 div 是绝对定位的，因此它们基本上被限制在该内容框内。

如果您将.card-large容器嵌套在其自己的父级中<div>并赋予新的父级，则当图像悬停position: relative时，您的图像将出现在堆叠上下文的顶部，并按预期显示在容器上方。.icon.card-large

/* Card Large */
.wrapper {
 position: relative;
}

.card-large {
  background-color: #283046;
  border-radius: .4rem;
  display: block;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: auto;
  color: #fff;
}

.card-large > h4 {
 color: #eee;
 font-size: 1.3em;
 margin: 0;
}

/* Tables */
#sets-individual-page .background .box-table {
  margin-bottom: 2rem;
}

.table {
  color: #fff !important;
  font-size: .8rem;
  border-spacing: 2px;
}

.table tr {
  min-height: 2rem;
}

.table th,
.table td {
  padding: .3rem .5rem .2rem .5rem !important;
  vertical-align: middle;
}

.table tr .standard > div,
.table tr .foil > div {
  display: inline;
  padding-right: .75rem;
  margin: 0;
}

#sets-individual-page .background tr .standard .btn-icon,
#sets-individual-page .background tr .foil .btn-icon,
#sets-individual-page .background tr .standard .btn-icon .icon,
#sets-individual-page .background tr .foil .btn-icon .icon {
  margin: 0 .2rem;
  text-align: center;
}

.table tr .standard input,
.table tr .foil input {
  height: 1.25rem;
  width: 2.5rem;
  margin: 0;
  text-align: right;
}

.table-hover tbody tr:hover td,
 .background .table-hover tbody tr:hover th {
  color: #f6f6f6;
  background-color: #161d31;
}

.table .icon,
.table .symbol {
  width: 1rem;
  height: 1rem;
  margin-right: .3rem;
  margin-bottom: .1rem;
}

/* MTG Card Images */
.large {
  position: absolute;
  display: none;
  left: 20%;
  top: 15%;
}

.btn-icon:hover + .large  {
  display: block;
  z-index: 999;
  
}

.large-image {
  position: absolute;
  border-radius: 1rem;
  z-index: 999;
  width: 18.75rem;
  height: 26.125rem;
}

<div class="wrapper">
  <div class="card-large">
    <h4>Cards</h4>
    <table class="table table-hover table-sm text-nowrap">
      <thead>
        <tr>
          <th scope="col" style="width: 03%;" class="text-end">
            <h5>#</h5>
          </th>
          <th scope="col" style="width: 25%;" class="">
            <h5>Name</h5>
          </th>
          <th scope="col" style="width: 15%;" class="">
            <h5>Type</h5>
          </th>
          <th scope="col" style="width: 07%;" class="">
            <h5>Rarity</h5>
          </th>
          <th scope="col" style="width: 10%;" class="">
            <h5>Mana Cost</h5>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
           <td class="text-end">1</td>
           <td class="">
            <span class="btn-icon btn-icon-primary">
              ️
              <img class="icon" src="/static/img/icons/image.png">
            </span>
            Chandra, Torch of Defiance
             <span class="large">
              <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
            </span>
            Chandra, Torch of Defiance
          </td>
          <td class="">Legendary Planeswalker — Chandra</td>
          <td class="">Mythic</td>
          <td class="">
            <img class="symbol" src="/static/img/symbology/2.png">
            <img class="symbol" src="/static/img/symbology/R.png">
            <img class="symbol" src="/static/img/symbology/R.png">
          </td>
        </tr>
        <tr>
          <td class="text-end">2</td>
          <td class="">
            <span class="btn-icon btn-icon-primary">
              ️
              <img class="icon" src="/static/img/icons/image.png">
            </span>
            <span class="large">
              <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/8/c/8c1a02f9-3ce7-46e9-8d0e-0d491bb13012.jpg?1593559582" height="500">
            </span>
            Cathartic Reunion
          </td>
          <td class="">Sorcery</td>
          <td class="">Rare</td>
          <td class="">
            <img class="symbol" src="/static/img/symbology/1.png">
            <img class="symbol" src="/static/img/symbology/R.png">
          </td>
          </td>
        </tr>
              <tr>
           <td class="text-end">3</td>
           <td class="">
            <span class="btn-icon btn-icon-primary">
              ️
              <img class="icon" src="/static/img/icons/image.png">
            </span>
            Chandra, Torch of Defiance
             <span class="large">
              <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
            </span>
            Chandra, Torch of Defiance
          </td>
          <td class="">Legendary Planeswalker — Chandra</td>
          <td class="">Mythic</td>
          <td class="">
            <img class="symbol" src="/static/img/symbology/2.png">
            <img class="symbol" src="/static/img/symbology/R.png">
            <img class="symbol" src="/static/img/symbology/R.png">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>