与不同背景重叠 td答案

【问题标题】：Overlap td with different background与不同背景重叠 td
【发布时间】：2019-08-09 13:19:45
【问题描述】：

您好，我正在创建一个时事通讯模板。目前我被困住了，因为我试图重叠两个td，并给最上面的一个不同的背景覆盖。

我附上了Code Pen，但下面是代码！所以你的图片在后面，前面有一个绿色的标题。我需要该标题上的透明（ish）背景。然而，我添加的任何背景似乎都放在了该图像的后面。有什么想法吗？

这是我想要实现的目标的图像：

    .second-row-header {
        margin-top: -62px;
    }

    .third-row {
        border-bottom: 59px solid #f9e7ed;
    }

    .third-row-text {
        width: 420px;
        font-size: 22px;
        margin-top: 30px;
        line-height: 1.36;
    }

    h1 {
        font-size: 65px;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        font-stretch: condensed;
        font-weight: bold;
        color: #95c11f;
        margin-bottom: 33px;
        margin-top: 0;
        line-height: 65px;
        background-color: red;
    }

    .more {
        background-color: #257236;
        border-top: 13px solid #257236;
        border-bottom: 13px solid #257236;
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 55px;
        margin-bottom: 60px;
        max-width: 337px;
        line-height: 1.5;
        font-size: 20px;
    }

    .more a {
        color: #fff;
        text-decoration: none;
    }

    .h2 {
        font-size: 40px;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        font-weight: bold;
        color: #884a5f;
        margin: 10px 0;
        display: block;
        line-height: 1.5;
        text-align: center;
    }

    .h1 {
        font-size: 40px;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        font-stretch: condensed;
        font-weight: bold;
        color: #95c11f;
        margin-top: 0;
        line-height: 45px;
        text-align:center;
    }

<table class="bodytable" align="center">
  <!-- REPEAT START -->
  <tr mc:repeatable>
    <td>
      <table class="elementtable" align="center" bgcolor="#f9e7ed" width="690px">
        <!-- FIRST ROW START -->
        <tr class="first-row" mc:hideable>
          <td>
            <table class="imagetable">
              <tr>
                <td>
                  <img src="https://gallery.mailchimp.com/af180f027aa47c874c895a8b5/images/a8d65979-bcb7-4f21-87a9-fec223f046c9.png" style="max-width:690px;" alt="a8d65979-bcb7-4f21-87a9-fec223f046c9.png" mc:edit="image">
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <!-- FIRST ROW END -->
        <!-- SECOND ROW START -->
        <tr class="second-row">
          <td>
            <table class="second-row-header" width="503px" height="62px" align="center">
              <tr>
                <td>
                  <div>
                    <p class="h1">Bienenfutter zum</p>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>

      </table>
    </td>
  </tr>
  <!-- REPEAT END -->
</table>

请注意，这是一个时事通讯模板，所以想想 web 1998，大多数花哨的网络东西在这里都没有用处！

【问题讨论】：

标签： html css html-table

【解决方案1】：

如果你想保持你的 HTML 结构，你应该使用 z-index，它的作用是根据值向上或向下移动项目。您应该尝试以下方式：

.h1{
    background: red;
    position: relative;
    z-index: 1;        
}

您不必定义 z-index，但它对可读性有好处，如果您想给其他元素提供不同的索引，它会很有用。另外，请记住 z-index 只有在元素设置了 position 时才会采取行动。您还可以查看 this 以了解有关 z-index 的更好上下文和信息。

【讨论】：