При наведении текст появляется в верхней части заголовка

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>

reallyЯ действительно рекомендую вам обернуть весь ваш контент, отсутствующий в заголовке, в компоненте <main></main>, чтобы легко написать этот тип очистителя css правила:

header {
    z-index: 1;
}

main{
    z-index: 0;
}