Html 位置：固定；使应用它的div元素消失_Html_Css

Html 位置：固定；使应用它的div元素消失

html css

Html 位置：固定；使应用它的div元素消失,html,css,Html,Css,我最近正在制作一个新网站，我正在尝试制作一个小型导航平台/导航栏。我想把条粘在顶部，所以我应用了位置：fixed到“顶栏”。然而，一旦我应用它，它就会消失。我已将条形图的宽度声明为自动，以便它在屏幕上延伸。这是需要的。以下是HTML： <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=decice-width, i

我最近正在制作一个新网站，我正在尝试制作一个小型导航平台/导航栏。我想把条粘在顶部，所以我应用了

位置：fixed到“顶栏”。然而，一旦我应用它，它就会消失。我已将条形图的宽度
声明为自动
，以便它在屏幕上延伸。这是需要的。以下是HTML：
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=decice-width, initial-scale=1.0" />
        <link href="https://fonts.googleapis.com/css?family=Kulim+Park&display=swap" rel="stylesheet">
        <title>sprank</title>
        <style>
        html {
            height: 100%;
            width: 100%;
            margin: none;
        }
        body {
            height: 100%;

        }
        p, h1, h2, h3, h4, h5, h6 {
            font-family: 'Kulim Park', sans-serif;
            color: white;

        }
        .intro-background {
            width: auto;
            height: 100%;
            background: rgb(2,0,36);
            background: linear-gradient(10deg, rgba(2,0,36,1) 0%, rgba(80,80,255,1) 100%, rgba(0,212,255,1) 100%);
            background-repeat: no-repeat;
            background-size: cover;
            margin: -8px -8px -8px -8px;

        }
        .top-bar {
            width: auto;
            opacity: 75;
            height: 50px;
            margin: -8px -8px -8px -8px;
            position: fixed;
            background-color: white;

        }
        .heading {
            font-size: 50px;
            float: right;
            margin-right: 4px;

        } 
        .number2 {
            float: left;
            font-size: 35px;
            margin-right: 4px;

        }
        </style>
        </head>
    <body>
        <div class="top-bar"><img src="Spranktopbar.png" alt="Sprank Logo" style="position: fixed; height: 50px; width: 50px;"></div>
        <div class="intro-background">
        <br><p class="heading">Welcome to sprank!</p>
        <br><p class="heading number2">A network where you can play cool games and chat</p><br>
        <br><p class="heading" style="font-size: 35px">And a safe haven to relax and chill</p></div>













    </body>
</html>


扭伤
html{
身高：100%；
宽度：100%；
保证金：无；
}
身体{
身高：100%；
}
p、 h1、h2、h3、h4、h5、h6{
字体系列：“Kulim Park”，无衬线；
颜色：白色；
}
.介绍背景{
宽度：自动；
身高：100%；
背景：rgb（2,0,36）；
背景：线性梯度（10度，rgba（2,0,36,1）0%，rgba（80,80255,1）100%，rgba（0212255,1）100%）；
背景重复：无重复；
背景尺寸：封面；
裕度：-8px-8px-8px-8px；
}
.顶栏{
宽度：自动；
不透明度：75；
高度：50px；
裕度：-8px-8px-8px-8px；
位置：固定；
背景色：白色；
}
.标题{
字体大小：50px；
浮动：对；
保证金权利：4px；
} 
.2号{
浮动：左；
字体大小：35px；
保证金权利：4px；
}

欢迎来到sprank

一个可以玩酷游戏和聊天的网络

是放松和放松的避风港

以下是网站：
感谢您的帮助。
将您的。顶栏类从宽度：自动
更改为宽度：100%