添加位置：固定；废墟 header

Question

代码如下：

div {
    border-radius: 5px;
    border: 1px solid green;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: 100%;
    background-color: #B2D490;
    z-index: 1;

}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
}
.left {
    height: 100%;
    width: 250px;
    background-color: #DBFFED;
    float: left;
    margin-top: 10px;
}
.right {
    height: 100%;
    width: 300px;
    background-color: #DBFFE0;
    float: right;
    margin-top: 10px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #E3E3E3;
}

<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>My Title</title>
 </head>
 <body>
 <div id="header">
     <h1>My <span>Resume</span></h1>
 </div>
 <div class="left">
     <h2>Experience</h2>
         <ul>
             <p>Microsoft Certified Solutions Expert (MCSE)</p>
             <p>Expert on jQuery</p>
         </ul>
     <h3>Skills</h3>
         <ul>
                <li><p>Complex Problem Solving</p></li>
             <li><p>Flexibility</p></li>
             <li><p>Strong Work Ethic</p></li>
         </ul>
 </div>
 <div class="right">
     <h4>Education</h4>
         <ul>
             <p>Some Courses</p>
        </ul>
     <h5>Business</h5>
         <ul>
             <li><p>Cafe</p></li>
         </ul>
     <h6>Earnings</h6>
         <ul>
             <li><p>10.000/Month</p></li>
         </ul>
 </div>
 <div style="clear:both; border:none; border-radius: none;"></div>
 <div id="footer">
     <p>© 2015 Some Text</p>
 </div>
 </body>
</html>

或http://codepen.io/anon/pen/ojXpxx

添加位置：固定； #header 毁了它。 header 变低并向右增加一些额外的 space 。我花了很多时间试图解决这个问题。试图添加包装器、更改元素位置等。似乎没有任何效果。那么问题是什么？谢谢。

Answer 1

我在这里看到的是，您的项目应用了一些不需要的默认 CSS 样式。要处理这个问题，您需要 'reset' 这些样式。我建议将此 CSS 文件添加到您的项目中。它会解决你的问题。

Eric Meyer's CSS Reset

Answer 2

申请职位时：固定；元素将相对于视图定位。

试试这个。

body{
  padding-top: 50px
}

#header {
    height: 52px;
    width: calc(100vw - 30px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 5px;
}

添加位置：固定；废墟 header

Adding position: fixed; ruins header

html

css

css-position