Как отобразить HTML-элемент, который частично скрыт

#html #css

#HTML #css

Вопрос:

Я работаю над модификацией устаревшего приложения, в котором мне разрешено вносить только изменения в css, но без изменений в html и javascript. Есть некоторые проблемы со стилем, которые я пытаюсь решить с помощью CSS, и одна из них заключается в том, что элементы скрываются друг за другом.

Я попытался установить атрибуты position и атрибуты z-index на разных уровнях для элементов, но, похоже, ни один из них не работает. Вот уменьшенная версия макета приложения

В настоящее время желтое поле частично скрыто под розовым полем. Здесь предполагается, что желтое поле отображается полностью, перекрываясь как с аквамариновым, так и с розовым полями. Любая помощь в решении этой проблемы путем изменения только CSS и не касаясь ничего внутри элемента таблицы было бы очень полезно

 .mainTable {
  border: black 1px solid;
}

.aquaBox {
  border: green 1px solid;
  background: aqua;
  overflow: visible;
}

.yellowBox {
  border: black 1px solid;
  background: yellow;
}

.pinkBox {
  border: red 1px solid;
  position: relative;
  background: pink
}

 <!DOCTYPE html>
<html>

<body>
  <table class='mainTable'>
    <tr>
      <td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
        abcdefg hijklmnop qrstuvw xyz
        <div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px;  position:absolute; '>
        </div>
      </td>
    </tr>
    <tr>
      <td class='pinkBox' style='width: 100%; height: 200px;'>
      </td>
    </tr>
  </table>
</body>

</html>

Ответ №1:

Вы можете добавить z-index: 1 , чтобы сделать эту работу, которая способствует порядку укладки элемента и позволяет ему отображаться поверх элементов, размещенных вне порядка укладки.

 .yellowBox {
  …
  z-index: 1;
}

ДЕМОНСТРАЦИЯ

 .mainTable {
  border: black 1px solid;
}

.aquaBox {
  border: green 1px solid;
  background: aqua;
  overflow: visible;
}

.yellowBox {
  border: black 1px solid;
  background: yellow;
  z-index: 1;
}

.pinkBox {
  border: red 1px solid;
  position: relative;
  background: pink
}

 <table class='mainTable'>
  <tr>
    <td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
      abcdefg hijklmnop qrstuvw xyz
      <div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px;  position:absolute; '>
      </div>
    </td>
  </tr>
  <tr>
    <td class='pinkBox' style='width: 100%; height: 200px;'>
    </td>
  </tr>
</table>

Ответ №2:

Установив z-index: 1; в вашем .yellowBox классе, я смог получить желаемый макет.

 <!DOCTYPE html>
<html>

  <head>
    <style>
      .mainTable {
        border: black 1px solid;
      }

      .aquaBox {
        border: green 1px solid;
        background: aqua;
        overflow: visible;
      }

      .yellowBox {
        border: black 1px solid;
        background: yellow;
        z-index: 1;
      }

      .pinkBox {
        border: red 1px solid;
        position: relative;
        background: pink
      }

    </style>
  </head>

  <body>
    <table class='mainTable'>
      <tr>
        <td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
          abcdefg hijklmnop qrstuvw xyz
          <div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px;  position:absolute; '>
          </div>
        </td>
      </tr>
      <tr>
        <td class='pinkBox' style='width: 100%; height: 200px;'>
        </td>
      </tr>
    </table>
  </body>

</html>
```````````````````````````` Currently the yellow box is partially hidden under the pink box. The expectation here is that the yellow box is shown completely, overlapping on both the aqua and pink boxes. Any help to resolve this by modifying only the
CSS and not touching anything inside the table element would greatly be helpful