Question

我自己在学习html / css / javascript，而且我遇到了一个两难的境地。由于某种原因，页面的内容与页面重叠到页面，使得标题无用。如何使标题位于内容之上。我将在代码下方包含图片以及如何寻找外观。

html文件，

<!DOCTYPE html>
<html>
<head>
    <title>Abismuth Homepage</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css">
    <meta charset="UTF-8">
    <meta name="description" content="Homepage">
    <meta name="keywords" content="Homepage">
    <meta name="author" content="Riley">
</head>
<body>
    <div class="header">
        <div class="container">   
            <div class="logo">   
                <h1><a href="../aboutus.html">Abismuth</h1>
            </div>

            <div class="nav">
                <ul>
                    <li><a href="../home.html">Home</a></li>
                    <li><a href="../lateststory.html">Latest story</a></li>
                    <li><a href="../aboutus.html">About us</a></li>
                    <li><a href="../contactus.html">Contact us</a></li>    
                </ul> 
            </div>
        </div>
    </div> 



    <div class="container">

        <div class="content">
            <h1><u>Welcome</u></h1>

            <p>Demo Text</P
        </div>
    </div>

    <div class="footer">
        <div class="container">             
            <div class="logo">   
                <h1></h1>
            </div> 
        </div>
    </div>

</body>
</html>

Css文件，

body {
    margin: auto;
    background: linear-gradient(132deg, #ffffff, #000000);
    background-size: 1500% 1500%;
    animation: BackgroundGradient 30s ease infinite;
}

@keyframes BackgroundGradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

.container {    
    width: 955px;
    margin: 0 auto;
    word-wrap: break-word; 
}

.header {
    text-align: centre;
    background: #D50000;
    width: 100%;
    height: 50px;
    top: 0;
    position: fixed;
}

.footer {
    text-align: centre;
    background: #D50000;
    width: 100%;
    bottom: 0;
    position: fixed;
}

.logo {
    float: left;
    color: white;
    font-family: 'Helvetica', 'Arial', 'sans-serif';
    font-size: 15px;
}

.content {
    text-align: center;
    padding-top: 50px;
    font-family: 'Helvetica', 'Arial', 'sans-serif';
    background-color: #ffffff;
    opacity: 0.5;
}

a {
    text-decoration: none;
    color: white;
}

li {
    list-style: none;
    float: left;
    margin-left: 15px; 
    padding-top: 15px;
}

.nav {
    float: right;
    font-family: 'Helvetica', 'Arial', 'sans-serif';
}

Answer 1

由于您的导航是position: fixed，因此页面上的其他元素将不会知道它的布局并将重叠，并且它将与其他元素重叠。

由于您已为导航定义了height，因此您可以将该高度用作padding-top上的body来偏移导航并启动其下方的内容。< / p>

＆＃13;

body {
  margin: auto;
  background: linear-gradient(132deg, #ffffff, #000000);
  background-size: 1500% 1500%;
  animation: BackgroundGradient 30s ease infinite;
  padding-top: 50px;
}

@keyframes BackgroundGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.container {
  width: 955px;
  margin: 0 auto;
  word-wrap: break-word;
}

.header {
  text-align: centre;
  background: #D50000;
  width: 100%;
  height: 50px;
  top: 0;
  position: fixed;
}

.footer {
  text-align: centre;
  background: #D50000;
  width: 100%;
  bottom: 0;
  position: fixed;
}

.logo {
  float: left;
  color: white;
  font-family: 'Helvetica', 'Arial', 'sans-serif';
  font-size: 15px;
}

.content {
  text-align: center;
  padding-top: 50px;
  font-family: 'Helvetica', 'Arial', 'sans-serif';
  background-color: #ffffff;
  opacity: 0.5;
}

a {
  text-decoration: none;
  color: white;
}

li {
  list-style: none;
  float: left;
  margin-left: 15px;
  padding-top: 15px;
}

.nav {
  float: right;
  font-family: 'Helvetica', 'Arial', 'sans-serif';
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Abismuth Homepage</title>
  <link rel="stylesheet" type="text/css" href="../../css/styles.css">
  <meta charset="UTF-8">
  <meta name="description" content="Homepage">
  <meta name="keywords" content="Homepage">
  <meta name="author" content="Riley">
</head>

<body>
  <div class="header">
    <div class="container">
      <div class="logo">
        <h1><a href="../aboutus.html">Abismuth</h1>
      </div>

      <div class="nav">
        <ul>
          <li><a href="../home.html">Home</a></li>
          <li><a href="../lateststory.html">Latest story</a></li>
          <li><a href="../aboutus.html">About us</a></li>
          <li><a href="../contactus.html">Contact us</a></li>
        </ul>
      </div>
    </div>
  </div>


  <div class="container">

    <div class="content">
      <h1><u>Welcome</u></h1>

      <p>Demo Text</P </div>
    </div>

    <div class="footer">
      <div class="container">
        <div class="logo">
          <h1></h1>
        </div>
      </div>
    </div>

</body>

</html>

＆＃13;

如何将我的内容放在标题上方

1 个答案: