导航栏下的页面内容使用 CSS 动画移动答案

【问题标题】：Page Content Under Nav-bar Moves with CSS Animations导航栏下的页面内容使用 CSS 动画移动
【发布时间】：2021-03-07 08:43:17
【问题描述】：

我在网页顶部的水平导航栏方面需要帮助。我正在使用 CSS 动画使导航按钮的字体大小在焦点和悬停时增加。我只希望我的导航栏在导航项目集中或悬停时移动。我唯一的问题是，当我的导航按钮聚焦或悬停时，导航栏下方的内容会向下移动。我只需要帮助我的导航栏下方的内容不受我的焦点或悬停导航按钮的字体大小不断增长的影响。

    /*NAVBAR CSS STARTS HERE*/
    nav {
    margin-left: 15%;
    }
    .navbar {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    display: inline;
    text-align: center;
    }
    .navbar li{
    display: inline;
    }
    .nav-link a {
      margin-left: 1%;
      padding: 14px 30px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.548);
      font-size: 20px;
      color: rgb(255, 255, 255);
      border-radius: 5px;
      font-weight: bold;
      letter-spacing: 5px; 
  }
  
  .nav-link a:hover, .nav-link a:focus {
    animation: grow 0.5s;
    animation-fill-mode: forwards;
  }
  
  /*nav-bar css ends here*/

下面是我网站上一个网页的 HTML。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta name="author" content="Maurice Rogers">
    <title>My Short Bio</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="backgroundImg">
    <header id="page-top">
    <h1><span>Maurice Rogers</span></h1>
    <nav>
    <ul class="navbar">
        <li class="nav-link"><a class="nav-link" 
    href="index.html">Bio</a></li>
        <li class="nav-link"><a class="nav-link" href="technical- 
    resume.html">Technical Resume</a></li>
        <li class="nav-link"><a class="nav-link" href="my- 
    animations.html">Animations</a></li>
        <li class="nav-link"><a class="nav-link" href="me- 
    surfing.html">Surfing</a></li>          
    </ul>
    </nav>
    </header>   
    <main>

    <br/>
    <h2><span>My Bio</span></h2>
    <br/>
    <div class="box">
    <p>I love to code. I find it to be very fun, interesting, and 
    rewarding. You can <a href="technical-resume.html" 
    accesskey="t">find my Technical Resume here</a>. I also have other 
    cool interests. I've spent many hours making animations. You can 
    <a href="my-animations.html" accesskey="a">view my animations 
    here</a>. I've been surfing all my life. It really is one of my 
    favorite things to do. You can <a href="me-surfing.html" 
    accesskey="s">see me surfing here</a>.</p>
    </div>

    </main>
    <footer>
    <nav>
    <a class="ftr-nav-link" href="index.html">Back to top</a>
    </nav>
    <h4 class="copy-right">&copy; 2021 Maurice Rogers</h4>
    </footer>
    </div>
    </body>
    </html>

【问题讨论】：

如果您可以提供一些代码供我们查看，这将有所帮助，但如果您在悬停规则上使用 transform: scale()，它可能会解决您文本周围的内容问题。移动。
@BertW 我在帖子中添加了代码。 transform: scale()不影响周边内容吗？

标签： html css

【解决方案1】：

你可以尝试在你的 ul 标签上放置一个 position: absolute 并从那里开始。

【讨论】：

我尝试了您的建议，但它对我的导航栏设计产生了负面影响。不过，我感谢您的努力。
对，position: absolute 会带走任何潜水，它的孩子会脱离正常的 html 流程。因此，您可以将其放置在屏幕的最顶部、屏幕中间，以及任何您想要的位置。诀窍是围绕绝对定位的绝对 div 创建一个包装器，给该 div 一个特定的大小，然后将另一个 div 绝对定位在其中，这样增长和收缩就不会影响流的其余部分。我敢肯定还有其他方法可以做到这一点，但这是迄今为止最简单的方法。

【解决方案2】：

我不得不修改您的代码以获得所需的结果。我使用transform: scale() 来增加字体大小而不影响按钮。显然，如果您使用display: inline，那么scale() 将不起作用，因此我更改了您的代码并使用弹性框属性。您的 html 也存在一些问题，您在 a 和 li 上都声明了类 nav-link，因此我从 a 中删除了该类。希望这对你有用。

 /*NAVBAR CSS STARTS HERE*/
    nav {
    margin-left: 15%;
    }
    .navbar {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    display: flex;
    text-align: center;
    }

    .nav-link {
      margin-left: 1%;
      padding: 14px 30px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.548);
      font-size: 20px;
      color: rgb(255, 255, 255);
      border-radius: 5px;
      font-weight: bold;
      letter-spacing: 5px; 
      transition: transform .5s;
  }
.nav-link a {
  display: block;
  color: white;
  text-decoration: none;
}
  
  .nav-link a:hover{
    transform: scale(1.2);
  }
  
  /*nav-bar css ends here*/

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta name="author" content="Maurice Rogers">
    <title>My Short Bio</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="backgroundImg">
    <header id="page-top">
    <h1><span>Maurice Rogers</span></h1>
    <nav>
    <ul class="navbar">
        <li class="nav-link"><a  
    href="index.html">Bio</a></li>
        <li class="nav-link"><a  href="technical- 
    resume.html">Technical Resume</a></li>
        <li class="nav-link"><a  href="my- 
    animations.html">Animations</a></li>
        <li class="nav-link"><a  href="me- 
    surfing.html">Surfing</a></li>          
    </ul>
    </nav>
    </header>   
    <main>

    <br/>
    <h2><span>My Bio</span></h2>
    <br/>
    <div class="box">
    <p>I love to code. I find it to be very fun, interesting, and 
    rewarding. You can <a href="technical-resume.html" 
    accesskey="t">find my Technical Resume here</a>. I also have other 
    cool interests. I've spent many hours making animations. You can 
    <a href="my-animations.html" accesskey="a">view my animations 
    here</a>. I've been surfing all my life. It really is one of my 
    favorite things to do. You can <a href="me-surfing.html" 
    accesskey="s">see me surfing here</a>.</p>
    </div>

    </main>
    <footer>
    <nav>
    <a class="ftr-nav-link" href="index.html">Back to top</a>
    </nav>
    <h4 class="copy-right">&copy; 2021 Maurice Rogers</h4>
    </footer>
    </div>
    </body>
    </html>

【讨论】：