Блог

Главная - Вопросы по программированию - Изображение, ограниченное элементом, обрезается, даже если z-индекс больше

Изображение, ограниченное элементом, обрезается, даже если z-индекс больше

#html #css

Вопрос:

У меня есть страница, которая генерирует таблицу из запроса API. Частью этого является изображение элемента, для которого я создал значок, который, когда пользователь наводит курсор, отображает изображение для этой строки. Возможно, я неправильно понял, как работает z-индекс, но я установил z-индекс изображения равным 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 элемента карты

Комментарии:

1. Вы пробовали прокручивать свою страницу после добавления дополнительного контента? Он не будет добавлять полосы прокрутки, потому что его позиция абсолютна. Z-индекс не имеет ничего общего с сокращением контента, это просто то, насколько «высок» элемент, поэтому он может скрываться за другим элементом. И я не вижу никакого overflow: правила

2. Я могу прокрутить этот элемент карты вниз, чтобы увидеть остальную часть изображения, однако я пытаюсь заставить его отображаться над элементом карты, чтобы пользователю не нужно было прокручивать, чтобы увидеть изображение.

3. Затем уменьшите размер вашего изображения, другого способа нет. Если элемент не помещается на страницу, вы должны прокрутить его, иначе он будет частично скрыт. Как вы представляете, как он появится в окне вашего браузера?

4. @TannerDolby Добавил html-код для всего элемента карты.

5. Добавил @TannerDolby.

Ответ №1:

Причина, по которой изображение вашей карты не появляется в верхней части стопки и над <div class="card-large"> контейнером, как вы ожидаете, придавая ему наибольшее z-index значение, заключается в том, что <img> элементы расположены абсолютно относительно родительского .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>

Ответ №2:

Не могли бы вы попробовать display: flow-root; вместо «блокировать» в .btn-icon:hover .large{} селекторе ?

Отображение корневого потока создает новый контекст формирования блоков, который может позволить большим изображениям переполнять всю таблицу. В основном он используется как метод clearfix, и я не знаю, работает ли он с элементами таблицы, но стоит попробовать.

Комментарии:

1. Боюсь, это, похоже, ничего не изменит.

Метки: , , ,