悬停时，文本显示在 header 上方

Question

我是 .html 的新手，自学，完成了一个网站，但我的 header.

遇到了一些问题

我有一些文本会在悬停时缩放，但如果部分文本被 header 遮挡，文本将缩放并显示在 header，我该如何解决这个问题？

我已经包含了一个片段来说明我的意思。

/************************** 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

在你的 header 和你的 section 上使用 z-index（小心你已经写了一次 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>

⚠️我真的建议你将所有不在header中的内容包装在一个<main></main>组件中，以便轻松编写这种清洁器css规则：

header {
    z-index: 1;
}

main{
    z-index: 0;
}

悬停时，文本显示在 header 上方

On hover, text appears on top of header

html

css

header

scale

hover