Question

我用过溢出：隐藏在css文件中。
我是CSS和Web开发的新手。
所以我想知道如何在导航栏上使用粘性。
当我删除溢出属性时，背景会发生变化。
这是我的以下代码。
如果您能给我解决该问题的代码，将对您有很大帮助。

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

请尝试这个

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 个答案: