如何将标题下的标题放在页脚的顶部？

我想将about部分置于FIXED头部和页脚之上？我很努力如何解决这个问题，我试图添加填充到顶部，但我注意到它只是移动的内容不是整个div.Also位置相对不能解决问题，因为页脚不在约节下对答案的解释将有助于正确理解答案。如何将标题下的标题放在页脚的顶部？

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 50px 
 
} 
 

 
header { 
 
    background-color: #191919; 
 
    position: fixed; 
 
    width: 100%; 
 
    color: #edf9ff; 
 
    min-height: 70px; 
 
    border-bottom: #0fe216 3px solid; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    margin-bottom: 20px; 
 
    margin-top:0; 
 
} 
 

 
header a { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #edf9ff; 
 
} 
 
a:hover { 
 
    color:blue; 
 
} 
 

 
header ul { 
 
    margin: 0; 
 
} 
 

 
header li { 
 
    list-style-type: none; 
 
    float: left; 
 
    padding-right: 20px; 
 
} 
 
#showtime { 
 
    position:relative; 
 
    top:100px; 
 
    width:80%; 
 
    margin: 0 auto; 
 
    background-color: #f2f2f2; 
 
} 
 
#showtime img { 
 
    width:300px; 
 
    height:300px; 
 
} 
 
/*Image Repz*/ 
 
.showright { 
 
    clear:both; 
 
} 
 

 
.highlight { 
 
    font-size:125%; 
 
    color:blue; 
 
} 
 
.showright img { 
 
    float:right; 
 
    clear:both; 
 
} 
 
.boxes:first-child { 
 
    padding-top:50px; 
 
} 
 
.boxes:not(:first-child) { 
 
    padding-top:100px; 
 
    
 
} 
 
.showright > p, .showright > h2 { 
 
    text-align: center; 
 
} 
 
.showleft img { 
 
    float:left; 
 
    clear:both; 
 
} 
 
.showleft > p, .showleft > h2 { 
 
    text-align: center; 
 
} 
 
footer { 
 
margin-top:30px; 
 
    background-color:#191919; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    clear:both; 
 
} 
 
footer p{ 
 
    text-align: center; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Photography | Home </title> 
 
     <link href="About.css" rel="stylesheet"/> 
 
     <script type="application/javascript" src="Home.js"></script> 
 
    </head> 
 
    <body> 
 

 
     <header> 
 
      <div id="branding"> 
 
       <h2>PHOTOGRAPHY</h2> 
 
      </div> 
 
      <nav id="links"> 
 
      <ul> 
 
       <li><a href="Home.html">Home</a></li> 
 
       <li><a href="About.html">About</a></li> 
 
       <li><a href="#">PHOTO GALLERY</a></li> 
 
       <li><a href="#">VIDEO GALLERY</a></li> 
 
      </ul> 
 
       </nav> 
 
     </header> 
 
     <section id="showtime"> 
 
       <div class="showleft boxes"> 
 
        <h2>What are we about?</h2> 
 
        <p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an 
 
         Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos 
 
        </p> 
 
       </div> 
 
       <div class="showleft boxes"> 
 
        <h2>Why should you ask Mukhtar Photography for like: Marriages, videos?</h2> 
 
        <p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us. 
 
        </p> 
 
      </div> 
 
     </section> 
 
       
 
     <footer> 
 
      <p>Note that any copyright &copy; is reserved</p> 
 
     </footer> 
 
    </body> 
 
</html>

来源

2017-05-27 Modina Begum

为了确保内容是标题后面，你可以在CSS中使用“z索引”。要在内容div下面安排页脚，您必须将其位置设置为“相对”。要在内容和页脚之间获得间距，可以向内容div添加底部边距。

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 50px 
 
} 
 

 
header { 
 
    background-color: #191919; 
 
    position: fixed; 
 
    z-index: 4; 
 
    width: 100%; 
 
    color: #edf9ff; 
 
    min-height: 70px; 
 
    border-bottom: #0fe216 3px solid; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    margin-bottom: 20px; 
 
    margin-top:0; 
 
} 
 

 
header a { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #edf9ff; 
 
} 
 
a:hover { 
 
    color:blue; 
 
} 
 

 
header ul { 
 
    margin: 0; 
 
} 
 

 
header li { 
 
    list-style-type: none; 
 
    float: left; 
 
    padding-right: 20px; 
 
} 
 
#showtime { 
 
    position:relative; 
 
    top:100px; 
 
    width:80%; 
 
    margin: 0 auto; 
 
    margin-bottom: 50px; 
 
    background-color: #f2f2f2; 
 
} 
 
#showtime img { 
 
    width:300px; 
 
    height:300px; 
 
} 
 
/*Image Repz*/ 
 
.showright { 
 
    clear:both; 
 
} 
 

 
.highlight { 
 
    font-size:125%; 
 
    color:blue; 
 
} 
 
.showright img { 
 
    float:right; 
 
    clear:both; 
 
} 
 
.boxes:first-child { 
 
    padding-top:50px; 
 
} 
 
.boxes:not(:first-child) { 
 
    padding-top:100px; 
 
    
 
} 
 
.showright > p, .showright > h2 { 
 
    text-align: center; 
 
} 
 
.showleft img { 
 
    float:left; 
 
    clear:both; 
 
} 
 
.showleft > p, .showleft > h2 { 
 
    text-align: center; 
 
} 
 
footer { 
 
    position: relative; 
 
    margin-top:30px; 
 
    background-color:#191919; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    clear:both; 
 
} 
 
footer p{ 
 
    text-align: center; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Photography | Home </title> 
 
     <link href="About.css" rel="stylesheet"/> 
 
     <script type="application/javascript" src="Home.js"></script> 
 
    </head> 
 
    <body> 
 

 
     <header> 
 
      <div id="branding"> 
 
       <h2>PHOTOGRAPHY</h2> 
 
      </div> 
 
      <nav id="links"> 
 
      <ul> 
 
       <li><a href="Home.html">Home</a></li> 
 
       <li><a href="About.html">About</a></li> 
 
       <li><a href="#">PHOTO GALLERY</a></li> 
 
       <li><a href="#">VIDEO GALLERY</a></li> 
 
      </ul> 
 
       </nav> 
 
     </header> 
 
     <section id="showtime"> 
 
       <div class="showleft boxes"> 
 
        <h2>What are we about?</h2> 
 
        <p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an 
 
         Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos 
 
        </p> 
 
       </div> 
 
       <div class="showleft boxes"> 
 
        <h2>Why should you ask Mukhtar Photography for like: Marriages, videos?</h2> 
 
        <p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us. 
 
        </p> 
 
      </div> 
 
     </section> 
 
       
 
     <footer> 
 
      <p>Note that any copyright &copy; is reserved</p> 
 
     </footer> 
 
    </body> 
 
</html>

来源

2017-05-27 10:32:44 Alex

的头添加z-index。这将解决它。

header { 
    background-color: #191919; 
    position: fixed; 
    width: 100%; 
    color: #edf9ff; 
    min-height: 70px; 
    border-bottom: #0fe216 3px solid; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 20px; 
    margin-top: 0; 
    z-index: 99; // ADD THIS LINE 
}

来源

2017-05-27 10:23:05 AdhershMNair

Z索引被用于元件下的顺序。我认为 –

如何将标题下的标题放在页脚的顶部？

回答

相关问题