添加位置：固定;废墟头

-2

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

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

添加位置是：固定;到#header毁了它。标题变低，并在右侧留出一些额外的空间。我花了很多时间来解决这个问题。试图添加包装，更改元素位置等。似乎没有任何工作。那么问题是什么？谢谢。

来源

2015-09-08 Artem Z

要回答“Whats the problem”有助于了解“期望值是多少”。 – leigero

使用谷歌搜索“粘头” – Mardzis

不真正知道你想达到什么。如果您将标题固定在顶部，则会像预期那样位于左侧和右侧div的前面。你确定你确实想修复它吗？对我来说似乎有点不可思议 – Jimmy

当您申请的位置是：固定;元素将相对于视图的位置。

试试看。

body{ 
    padding-top: 50px 
} 

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

来源

2015-09-08 13:29:09 Aakash

请在您的答案中避免使用l33t speek和健谈的首字母缩略词。 – leigero

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

Eric Meyer's CSS Reset

来源

2015-09-08 13:29:08 IndieRok

添加位置：固定;废墟头

回答

相关问题