CSS位置不适用于粘性

Question

I have used overflow: hidden in the css file. 我使用过溢出：隐藏在css文件中。
I am new to css and web development. 我是CSS和Web开发的新手。
So i want to know how to use sticky on that navigation bar. 所以我想知道如何在该导航栏上使用粘性。
when i remove the overflow property the background changes. 当我删除溢出属性时，背景会发生变化。
Here is my code for the following. 这是我的以下代码。
If you can give me the code to solve that problem it will be a great help. 如果您能给我解决该问题的代码，将对您有所帮助。

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, legend, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } article, aside, details, figcaption, footer, figure, header, hgroup, menu, nav, section { display: block; } .header { margin-top: 20px; height: 40px; width: 100% } .left_header a { margin: 0 0 0 20px; text-decoration: none; color: green; float: left; } .right_header { margin: 5px 0 0 0; float: right; padding: 12px; } .navbar { height: 30px; } ul { list-style-type: none; border: 1px solid #e7e7e7; background-color: #f3f3f3; margin: 0; padding: 0; overflow: hidden; position: sticky; top: 0; } li { float: left; } li a { display: block; color: black; text-align: center; padding: 15px 20px; text-decoration: none; } li a:hover { background-color: green; color: white; } .footer { height: 200px; }

 <!DOCTYPE html> <html lang="en-US"> <head> <title>The Only One Stop for Laptops &amp; their Accessories!</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" type="text/css" href="styles/style.css" /> <style> .content { height: 700px; } </style> </head> <body style="font-family: verdana;"> <header class="header"> <div class="left_header"> <h1><b><i><a href="index.html">TechTops</a></i></b></h1> </div> <div class="right_header"> The Only One Stop for Laptops &amp; their Accessories! </div> </header> <br> <nav class="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Laptops</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <div class="content"> </div> <hr> <footer class="footer"> </footer> <hr> </body> </html>

Answer 1

Please try This 请尝试这个

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,
code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,legend,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    vertical-align: baseline;
}
article,aside,details,figcaption,footer,figure,header,hgroup,menu,nav,section{
    display: block;
}

.header {
    margin-top: 20px;
    height: 40px;
    width: 100%
}
.left_header a {
    margin: 0 0 0 20px;
    text-decoration: none;
    color: green;
    float: left;
}
.right_header {
    margin: 5px 0 0 0;
    float: right;
    padding: 12px;
}
.navbar {   
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
ul {
    list-style-type: none;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    margin : 0;
    padding: 0;    
}
ul:after{ content: ""; height: 0px; overflow: hidden; clear: both; display: block; }
li {
    float: left;
}
li a {
    display: block;
    color: black;
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
}
li a:hover {
    background-color: green;
    color: white;
}
.footer {
    height: 200px;
}

CSS位置不适用于粘性

问题描述

1 个解决方案

解决方案1
-1 2018-08-05 16:38:40

CSS位置不适用于粘性

问题描述

1 个解决方案

解决方案1 -1 2018-08-05 16:38:40

解决方案1
-1 2018-08-05 16:38:40