Question

我希望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>

Answer 1

为标头添加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
}

Answer 2

要确保内容位于标题后面，您可以使用＆＃34; z-index＆＃34;在css。要将页脚排列在内容div下方，您必须确定其位置＆＃34; relative＆＃34;。要在内容和页脚之间获得间距，可以在内容div中添加下边距。

＆＃13;

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

＆＃13;

SELECT * FROM (
    SELECT *,
    (DATEDIFF(day, Date, CurrentDate)) AS Age
    FROM Order_Member   
)sub
    WHERE Age > 7

＆＃13;

我如何将标题部分放在页眉下但在页脚顶部？

2 个答案: