Question

我正在为我的教堂建立一个网站， https://new.churchindenver.org/

我有一个打开菜单的移动“菜单”按钮，和一个关闭它的“关闭”按钮。

两者都有以下CSS：

@media (max-width: 600px) {
    #menu {
        top: -41px ! important;
    }
    #logo {
        top: -10px ! important;
    }
}

我希望菜单按钮处于绝对位置顶部：10px; 右：10像素；

当屏幕宽度为601-895px时，它可以正常工作。当屏幕宽度小于等于600像素时，css将被忽略，并且“菜单”按钮向下跳大约50像素。（顺便说一句，徽标也跳下来了，尽管距离不远）。有人知道为什么吗？

谢谢！

是否！重要与否，无论我放在那儿，菜单按钮（和徽标）都处于绝对位置，但显然不在其父元素的位置。

更新：根据Elraphty的建议，我进行了以下修改，似乎可以解决该问题。我仍然不知道发生了什么事情，但至少它看起来正确。我输入：

struct Result {
    str: String,
}    

fn main() {
    let times = 10;
    let mut last: Option<&str> = None;

    for i in 0..times {
        let current = do_something(last);
        last = match current {
            Some(r) => Some(&r.str.to_owned()),
            None => None,
        };
    }
}

fn do_something(o: Option<&str>) -> Option<Result> {
    Some(Result {
        str: "whatever string".to_string(),
    })
}

，现在菜单按钮和徽标位于顶部10像素的适当位置。

Answer 1

错误是由

引起的

    top:10px;
    right: 10px;

由于它们都具有绝对位置，因此该解决方案编写一个媒体查询，而不是在屏幕小于600像素（例如）时更改顶部和右侧的值。

     @media screen and (max-width: 600px) {
        . class {        
            top: 5px ! important;
            right: 5px  ! important;
        }
      }

Answer 2

您也可以这样做

.nav {
     position: relative
 }

 .navItems {
       display: inline;
      position: absolute;
       top:10px;
      right: 10px;
 }

因此，这些项绝对位于nav元素中，而不是body元素中

或使用flex

.nav {
     height: 100px;
     display: flex;
     flex-direction: row;
     justify-content: center;
 }

移动菜单按钮跳来跳去

2 个答案: