响应式顶部导航栏向上移动错误

Question

开始为自己编写一个网站..仍然试图弄清楚如何做事情，我陷入了这个烦人的小事情， 我真的很想修复它。 我有以下HTML和CSS代码， 问题是，由于某些原因，当我单击导航栏图标时，它会稍微打开一点...

HTML

<header class="topNav" id="topResNav">

    <a>DANIEL SHALAR</a>

    <nav>
    <a>MIX SHOW</a>
    <a>MUSIC</a>
    <a style="color:gray;">HOME</a> 
    </nav>

    <a href="javascript:void(0);" class="ResNav" onclick="myResNav()">
    <i class="fa fa-bars"></i>
    </a>

</header>

CSS

/* Responsive Header */

header .ResNav{
    display: none;
}

@media screen and (max-width: 650px) {

    header nav a{display: none;}

    header a.ResNav{
    float: right;
    display: block;
    color: white;
    }

    .topNav.responsive {position: relative;}

    .topNav.responsive .ResNav {
    position: absolute;
    right: 0;
    top: 0;
    }

    .topNav.responsive a {
    float: none;
    display: block;
    text-align: left;
    }
}

JAVA脚本

<script>
function myResNav() {
    var x = document.getElementById("topResNav");
    if (x.className === "topNav") {
        x.className += " responsive";
    } else {
        x.className = "topNav";
    }
}
</script>

Answer 1

单击导航图标时，您正在对其应用新类，并且由于将其更改为position: absolute;而看到它发生了变化。这会使图标脱离相对页面流。同样，使用top:0和right:0将图标放在容器的右上角，这与图标的原始位置不同。

您可以尝试以下几种方法：

尝试不设置任何值： 对于初学者，请尝试不要使用right或top，然后看看会发生什么。根据其他因素，您可能会很幸运。我是为别人说的，不是针对您的具体情况。

匹配填充值： 显然，要做的是...将top和right的值与父容器的填充（或填充）进行匹配，只需通过目测来调整它们即可。例如，如果父容器具有padding:1em，则将在图标上使用top:1em和right:1em。您也可以根据需要使用像素值。

使用JavaScript： 一种更高级的技术是使用其他Javascript检测相对元素的原始页面位置，然后将其应用为top和right值，这些值在切换到position:absolute;时会起作用。使用此功能，如果要更改许多元素上的相对/绝对位置，它将特别有用。

您将使用以下内容：

var el = document.getElementById("my_menu_icon");
var elPosition = el.getBoundingClientRect();
el.style.right = br.right + 'px';
el.style.top = br.top + 'px';