时间戳

首页 > 解决方案 > 我的元素不在屏幕上，我不知道如何修复它

html - 我的元素不在屏幕上，我不知道如何修复它

问题描述

我最近做了一个简单的导航栏，它不适合我的屏幕。我希望它正确浮动。这里的问题是我的 navbarList 不在屏幕上。它需要是位置：固定的，否则它会移动下面的元素。我真的需要尽快解决这个问题。

小提琴：https ://jsfiddle.net/zen41w7h/

        <div class="top">
            <div class="navbarOuter">
                <div class="hamborgor">≡&lt;/div>
                <div class="hamborgor2">×</div>
                <div class="navbarInner">
                    <ul class="navbarList">
                        <li><a href="Sub1.html" class="navbarButton">Sub1</a></li>
                        <li><a href="Sub2.html" class="navbarButton">Sub2</a></li>
                        <li><a href="Sub3.html" class="navbarButton">Sub3</a></li>
                    </ul>
                </div>
            </div>
        </div>

CSS：

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cairo:wght@200;300;400;600;700;900&family=Dancing+Script:wght@400;500;600;700&family=Fraunces:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lobster&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

li {
    list-style-type: none;
}

* {
    font-family: Montserrat;
    margin: 0;
    
}

a {
    color: #fff;
}

a:hover {
    color: #555;
}

.top {
    background-color: #dddddd;
}

.navbarOuter {
    float: right;
    width: 40px;
    height: 40px;
    background-color: aqua;
    position: relative;
    display: block;
    transition: all 1s linear;
}

.hamborgor2 {
    font-size:55px;
    line-height: 43px;
    width: 40px;
    height: 40px;
    text-align: center;
    position: absolute;
    display: none;
} 

.navbarOuter:hover .hamborgor2 {
    display: block;
}

.navbarOuter:hover .hamborgor {
    display: none;
}

.hamborgor {
    width: 40px;
    height: 40px;
    font-size:40px ;
    text-align: center;
    line-height: 40px;
    cursor: default;
    position: absolute;
}

.navbarInner {
    display: none;
}

.navbarList {
    width: 100px;
    height: 25px;
    padding: 40px 0px 0px 0px;
    position: fixed;
}

.navbarButton {
    background-color: palegreen;
    text-decoration: none;
    line-height: 25px;
    display: block;
    width:100px;
    padding:12px 5px ;
}

.navbarOuter:hover .navbarInner {
    display:block;
}

标签： htmlcssscreenelementbounds

解决方案

我试图了解你在做什么，但从我所看到的......不，你不需要position: fixed......只需删除它并将 absolute 添加到navbarInner类：

.navbarInner {
  display: none;
  position: absolute;
  right: 10px;
}

推荐阅读