添加位置：固定;廢墟頭

-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

添加位置：固定;廢墟頭

回答

相關問題