内容越过我的标题，但不是页脚？

问题描述 投票：0回答：2

由于某种原因，我在.box中的内容超出了我的标题，但是当你调整窗口大小时，我的内容不是我的页脚。我试图使页脚/标题固定，因此当调整窗口大小时，它们不会移动并且内容会覆盖它们。但就像我说它只适用于页脚，标题允许内容覆盖它。所以我想知道我该怎么做才能解决这个问题？谢谢。

body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.fixed-header, .fixed-footer {
  width: 100%;
  position: fixed;
  background: #333;
  padding: 10px 0;
  color: #fff;
  text-align: center;
}

.fixed-header{
  top: 0;
}

.fixed-footer{
  bottom: 0;
}

.box {
  background: #FFFFFF;
  padding: 10px;
  width: 400px;
  height: 600px;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>

<html lang="en">

 <head>
  <title>Kumo99.cf</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="favicon.ico">
 </head>

 <body>

<div class="fixed-header">
  <div class="container">
   <nav>
     <a href="index.html">HOME</a>
     <a href="projects.html">PROJECTS</a>
     <a href="about.html">ABOUT</a>
   </nav>
 </div>
</div>

  <div class="box">
  <div class="container">
   <img src="images/avatar.png" alt="" class="box-avatar">
   <h1>KUMO</h1>
   <h5>RANDOM DEVELOPER</h5>
   <ul>
     <li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
   </ul>
  </div>
  </div>

  <div class="fixed-footer">
    <div class="container"><a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2017</a></div>
  </div>

 </body>
</html>
html css header position
2个回答
0
投票

为标题设置一个z-index，其数字大于.box，默认情况下都是0。所以，就像尝试z-index: 999;一样，您也可以决定为页脚设置更高的z-index值，但是，因为它是在html布局中的.box元素之后添加的，所以它默认显示在顶部。

.fixed-header, .fixed-footer {
    width: 100%;
    position: fixed;
    z-index: 999;
    background: #333;
    padding: 10px 0;
    color: #fff;
    text-align: center;
}

此外，在示例中，我决定更改.box css。不正面为什么你有其他CSS风格。猜猜你正在做一些有点不同的事情。

.box {
    background: #FFFFFF;
    padding: 10px;
    width: 400px;
    height: 600px;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: center;
}


body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.fixed-header, .fixed-footer {
  width: 100%;
  position: fixed;
  z-index: 999;
  background: #333;
  padding: 10px 0;
  color: #fff;
  text-align: center;
}

.fixed-header{
  top: 0;
}

.fixed-footer{
  bottom: 0;
}

.box {
    background: #FFFFFF;
    padding: 10px;
    width: 400px;
    height: 600px;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: center;
}
<!DOCTYPE html>

<html lang="en">

 <head>
  <title>Kumo99.cf</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="favicon.ico">
 </head>

 <body>

<div class="fixed-header">
  <div class="container">
   <nav>
     <a href="index.html">HOME</a>
     <a href="projects.html">PROJECTS</a>
     <a href="about.html">ABOUT</a>
   </nav>
 </div>
</div>

  <div class="box">
  <div class="container">
   <img src="images/avatar.png" alt="" class="box-avatar">
   <h1>KUMO</h1>
   <h5>RANDOM DEVELOPER</h5>
   <ul>
     <li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
   </ul>
  </div>
  </div>

  <div class="fixed-footer">
    <div class="container"><a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2017</a></div>
  </div>

 </body>
</html>
0
投票
.box {
    background: #FFFFFF;
    padding: 10px;
    width: 400px;
    height: 600px;
    text-align: center;
    /* top: 50%; */
    /* left: 50%; */
    /* position: absolute; */
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

.fixed-header, .fixed-footer {
    width: 100%;
    position: fixed;
    background: #333;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    z-index: 10;
}

使用这些更新的课程，您可以实现您的目标。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.