-1

我正在使用2 div元素。這些元素互相重疊，但我希望他們一個接一個地跟隨。Div元素定位不正確

<!DOCTYPE> 
 
    <html> 
 
    <head> 
 
    <title>Online</title> 
 
    <style> 
 
    .rectangle { 
 
    \t min-height: 40px; 
 
    \t margin-bottom: 20px; 
 
    \t border: 1px solid transparent; 
 
    \t height: 65px; 
 
    \t position: fixed; 
 
    \t top: 0px; 
 
    \t right: 0px; 
 
    \t left: 0px; 
 
    \t border-radius: 0px; 
 
    \t background-color:#67518e; 
 
    \t z-index:15; 
 
    \t 
 
    } 
 
    .section-content { 
 
     padding-top: 30px; 
 
     padding-bottom: 30px; 
 
     border-top: 1px solid green; 
 
     border-bottom: 1px solid green; 
 
    \t position: absolute; 
 
    \t right: 0; 
 
    \t left: 0; 
 
    \t z-index: 10; 
 
    \t background-color: yellow; 
 
    \t } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    \t <div class="rectangle"> \t 
 
    \t </div> \t 
 
    <div class="section-content"> 
 
    </div>

來源

2015-01-05 Siddharth A

其格，以及如何你想讓 –

到底是什麼，在1小時內第二個相同的問題？ http://stackoverflow.com/questions/27776599/container-not-wrapping-the-content –

刪除定位聲明，因爲這是導致你的問題:(我也刪除了一些未使用的'其他'CSS）。

由於Position:absolute;將

結盟，其最近的祖先有一個相對高度

才知道是很重要的，因爲你必須有一個「固定」的位置，第一個div它會將其自身對齊到頁面的左上角。

爲了使申報單「填寫的寬度」的頁面中，我已經包含了一個「簡單的CSS復位」，通過包括：

在我的CSS

html,body{ 
    margin:0; 
    padding:0; 
    }

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.rectangle { 
 
    height: 65px; 
 
    background-color: #67518e; 
 
    width: 100%; 
 
} 
 
.section-content { 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    border-top: 1px solid green; 
 
    border-bottom: 1px solid green; 
 
    background-color: yellow; 
 
    width: 100%; 
 
}

<div class="rectangle"> 
 
</div> 
 
<div class="section-content"> 
 
</div>

作爲一個方面說明：我想突出你的

min-height: 40px;

這種使用永遠不會因爲你使用的是固定高度使用。這種造型的唯一真正發揮作用，當你使用百分比的喜歡作爲計量單位，而不是PX（因爲這些不會動態改變）

LIVE DEMO OF STICKY HEADER

來源

2015-01-05 11:36:09 jbutler483

其工作。但我希望div完全覆蓋頁面的左側和右側。 –

只是爲了填充頁面的寬度。 @ jbutler483 –

它的工作很好。我還有一個疑問。我想將.rectangle固定到屏幕上。可能嗎？ @ jbutler483： –

發生這種情況，因爲你正在使用position: fixed的元素與.rectangle類。不改變位置的一個解決方案是使用margin-top: 59px的元素.section-content：

.rectangle { 
 
    min-height: 40px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid transparent; 
 
    height: 65px; 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    border-radius: 0px; 
 
    background-color: #67518e; 
 
    z-index: 15; 
 
} 
 
.section-content { 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    border-top: 1px solid green; 
 
    border-bottom: 1px solid green; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    background-color: yellow; 
 
    margin-top: 59px; 
 
}

<div class="rectangle"></div> 
 
<div class="section-content">

你可以仔細看看到documentation左右的位置。

來源

2015-01-05 11:34:19

如果OP滾動頁面，固定div將隱藏頁面元素 –

@sanojlawrence根據OP _i想要元素後跟一個其他_。 –

沒有使用任何其他方法的固定方法 –

你既可以使雙方<div>小號<span> S，或兩個CSS類，添加以下行：display: inline;。

來源

2015-01-05 11:34:34 derjoachim

明白！謝謝您的幫助。 –

Div元素定位不正確

回答

LIVE DEMO OF STICKY HEADER

相關問題