Question

我的网页上有一个导航栏，我的网页上也有信息。当我删除信息（段落和标题）时，导航栏功能完美。但是，当我放回信息时，导航栏无论如何都无法正常工作。为什么网站会这样做？感谢。

JSFiddle - 有信息

JSFIDDLE - 没有信息

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="homepage.css">
  <title>CSGOMarble</title>
</head>
<body>  
<h3 style="float: right; margin-right: 25px;"><a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a></h3>

<div class="logo">
  <img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>

<hr>

<div class="navbar">
    <ul>
      <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
      <li><a href="coinflip.html">COINFLIP</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>
<div class="container">
  <h2>CSGOMarble</h2>
  <u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
  <p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>

CSS：

body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
  width: 100%;
  margin-top: 20px;
  font-size: 25px;
  display: inline-block;
  position: fixed;
  text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 175px;
    background-color: #f1f1f1;
    border: 2px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 12px 0 12px 0;
    text-decoration: none;
}
li a:hover {
    background-color: #555;
    color: white;
}
li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

Answer 1

除非您希望元素不与页面一起滚动，否则不要使用position:fixed。此css设置非常适用于固定在屏幕/窗口并始终可见的标题（导航栏）。

与position:fixed类似的另一个是position:absolute，但它会在用户向下滚动页面时向上滚动。但是，绝对和固定都允许您使用top left right bottom精确定位屏幕上的元素。（一个提示：父元素必须是position:absolute或position:relative（相对是常见的）。

将position:fixed

更改为position:relative至<div class="container">

Answer 2

当您添加固定到容器的位置时，您可以在容器和导航div上添加z-index，以便根据需要修复此问题。

.navbar {
    margin-top: 50px;
    margin-left: 25px;
    padding: 0;
    font-size: 15px;
    float: left;
    display: inline-block;
    z-index: 2;
    position: fixed;
}

.container {
    width: 100%;
    margin-top: 20px;
    font-size: 25px;
    display: inline-block;
    position: fixed;
    text-align: center;
    z-index: 1;
}

改变这个Css希望它有帮助

导航栏无响应

2 个答案: