悬停时，文本显示在标题顶部

Question

我是.html的新手，自学成才，完成了一个网站，但是我的标题出现了一些问题。

我有一些可在悬停时缩放的文本，但是如果文本的一部分被标题遮盖，则文本会缩放并出现在标题的[[顶部中，如何解决此问题？

我提供了一个片段来说明我的意思。

/************************** Header *******************/
  header {
    min-height: 150px;
    background: #ccc;
    position: fixed;
    width: 100%;
  }

    header ul{ 
    display: inline;
    text-align: left;
    
    }
    header ul li{
        margin-left: 0px;
        padding: 2px;
    }
    header ul li:first-child{
        margin-left: 0px;
        padding: 2px;
     }
     header ul li:last-child{
      margin-bottom: 30px;
      padding: 2px; 
   }
   
   .spacer{
   height: 150px;
   }
   
/********************* Table & Buttons ******************/

    .select{
      height: 100%; 
      background-color: #f2f2f2; 
      padding-top: 35px;
      padding-bottom: 35px;
    }

    .category {
      margin: 0 auto;
      width: 90%;
      border-collapse: collapse;
      height: 10%;
      background-color: #f2f2f2;
      text-align: center;
      font-size: xx-large;
      
    }

    .mb, .ce{ 
      width: 50%; 
    }

    .mb{ 
      border-right: 2px solid #2F4858;
    }

 
.mb:hover, .ce:hover{
      transform: scale(1.1);
      transition: transform .2s;
    }
      
    .sub{
      text-align: center;
      font-size: x-large;
      width: 100%;
    }

    .btn {
      background-color: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

   .spacer2 {
    height: 140px;
    background: #f2f2f2;
   }

<header>
  <nav>
    <ul>
      <li> 
        <a>Home</a> 
      </li>
      <li class="current"> 
        Portfolio 
      </li>
      <li> 
        <a>About</a> 
      </li>
      <li> 
        <a>Contact / Services</a> 
      </li>
    </ul>
  </nav>    
</header>

<section class="spacer">
</section>

<seciton>
  <div class="sub">
    <p> Links </p>
  </div>
  <div class="select">
    <table class="category">
      <tr>
        <td class="mb" >
          <button class="btn" style="height: 100%;"> 
           <p style="font-size: xxx-large">Button Number One</p>
          </button>
        </td>
        <td class="ce" >
          <button class="btn" style="height: 100%;"> 
            <p style="font-size: xxx-large">Button Number Two</p>
          </button>
        </td>
      </tr>
    </table>
  </div>
</seciton>

<section class="spacer2">
</section>



    

Answer 1

在您的z-index和您的header上使用section（请小心，您曾经写过seciton一次是骗子：

/************************** Header *******************/
  header {
    min-height: 150px;
    background: #ccc;
    position: fixed;
    width: 100%;
    z-index: 1; /* ---Set a z-index here--- */
  }
  
    header ul{ 
    display: inline;
    text-align: left;
    
    }
    header ul li{
        margin-left: 0px;
        padding: 2px;
    }
    header ul li:first-child{
        margin-left: 0px;
        padding: 2px;
     }
     header ul li:last-child{
      margin-bottom: 30px;
      padding: 2px; 
   }
   
   .spacer{
   height: 150px;
   }
   
/********************* Table & Buttons ******************/

    .select{
      height: 100%; 
      background-color: #f2f2f2; 
      padding-top: 35px;
      padding-bottom: 35px;
    }

    .category {
      margin: 0 auto;
      width: 90%;
      border-collapse: collapse;
      height: 10%;
      background-color: #f2f2f2;
      text-align: center;
      font-size: xx-large;
    }

    .mb, .ce{ 
      width: 50%; 
    }

    .mb{ 
      border-right: 2px solid #2F4858;
    }

 section {
   z-index: 0; /* ---And another here that is lower--- */
 }
.mb:hover, .ce:hover{
      transform: scale(1.1);
      transition: transform .2s;
      z-index: 0;
    }
      
    .sub{
      text-align: center;
      font-size: x-large;
      width: 100%;
    }

    .btn {
      background-color: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

   .spacer2 {
    height: 140px;
    background: #f2f2f2;
   }

<header>
  <nav>
    <ul>
      <li> 
        <a>Home</a> 
      </li>
      <li class="current"> 
        Portfolio 
      </li>
      <li> 
        <a>About</a> 
      </li>
      <li> 
        <a>Contact / Services</a> 
      </li>
    </ul>
  </nav>    
</header>

<section class="spacer">
</section>

<section>
  <div class="sub">
    <p> Links </p>
  </div>
  <div class="select">
    <table class="category">
      <tr>
        <td class="mb" >
          <button class="btn" style="height: 100%;"> 
           <p style="font-size: xxx-large">Button Number One</p>
          </button>
        </td>
        <td class="ce" >
          <button class="btn" style="height: 100%;"> 
            <p style="font-size: xxx-large">Button Number Two</p>
          </button>
        </td>
      </tr>
    </table>
  </div>
</section>

<section class="spacer2">
</section>

⚠️我真的建议您将所有不在标头中的内容包装在<main></main>组件中，以轻松编写这种类型的清洁器CSS规则：
header {
    z-index: 1;
}

main{
    z-index: 0;
}