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

-2

我自己在学习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'; 
}

来源

2017-05-27 Abismuth

嗨Abismuth，你需要共享相关的标题和内容代码再现您的问题。 *“寻求调试帮助的问题（”为什么这个代码不工作？“）必须包含所需的行为，特定的问题或错误以及在问题本身中重现它的最短代码。请参阅：如何创建[mcve ]。“* –

我添加了我在imgur上传的代码的链接。 – Abismuth

不是您的代码图片，我们需要您的实际代码。它需要在帖子本身 - 而不是一个第三方网站的链接。 –

因为你的资产净值是position: fixed，页面上的其他元素不会意识到它的布局，会覆盖它，它会重叠其他元素。

由于您已将height定义为导航，因此您可以使用该高度作为padding-top（body）来偏移导航并在其下启动内容。

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'; 
 
}

<!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>

来源

2017-05-27 21:49:36

啊，我不知道使导航位置：固定使其他元素不知道它的布局。谢谢您的帮助。 – Abismuth

@Abismuth不用客气。 'position：fixed;'和'position：absolute;'都是这样的。 'float：左/右;'也是类似的。 https://developer.mozilla.org/en-US/docs/Web/CSS/position和https://developer.mozilla.org/en-US/docs/Web/CSS/float?v=control –

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

回答

相关问题