Question

我正在修改旧版应用程序，在该应用程序中，我只能进行css更改，而不能进行html和javascript更改。我正在尝试通过CSS解决一些样式问题，其中之一是元素之间相互隐藏。

我尝试将元素的位置属性和z-index属性设置在不同的级别，但是它们似乎都不起作用。这是应用程序布局的缩小版本

当前，黄色框部分隐藏在粉红色框下方。这里的期望是黄色框被完全显示，在水色和粉红色框上都重叠。通过仅修改CSS而不接触table元素内部的任何内容来解决此问题的任何帮助都将很有帮助

.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>

Answer 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>

Answer 2

通过在您的<button class="appBtn imgCenter">download now!</button>类上设置var user_agent = this.userAgent(); if (user_agent == "ios") { $('.appBtn').html('Play Now'); } this.userAgent = function(){ if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) { return "ios"; }，我可以得到所需的布局。

z-index: 1;

如何显示部分隐藏的HTML元素

2 个答案: