與引導程序3重疊的區段

我正在創建引導程序模板，並遇到問題。與引導程序3重疊的區段

section id="content-one"顯示在頁面頂部。似乎我找不到解決方案將其放在全屏幕標題下。

這裏需要定位： pic

下面是代碼：http://codeply.com/go/8iYGenpntB

來源

2016-02-25 Amir

不確定我關注。您的代碼鏈接有＃個內容，與上面的屏幕截圖位於同一位置。你想要它在別的地方嗎？ http://imgur.com/8UuYPPf – jameson

對不起。＃content-one需要放在主標題下方。我只是指出他目前的收購案。 – Amir

這是因爲你的英雄元素是絕對定位的。 – makshh

的問題是，內<section id="hero">元素是絕對定位，其中他們離開正常文檔流的和其他的元件將忽略他們在頁面上的位置（即假裝他們不在那裏）。這就是爲什麼<section id="content-one">高於「主標題」，即<section id="hero">的內容。具有絕對定位的元素是.hero-wrapper和.hero-container。

我不確定最終的佈局應該是什麼或對它的要求，所以除了指出問題的根源之外很難推薦更多。您可以使用填充和邊距來獲得<section id="hero">您想要的高度/大小。

來源

2016-02-25 18:04:30 hungerstar

謝謝你的忠告，我現在瞭解情況。這個想法是一個「單頁面」，主英雄頭像調整到不同的桌面屏幕。只要我改變「立場：絕對的」;英雄標題不會覆蓋屏幕上的屏幕大小。 – Amir

與引導程序3重疊的區段

回答

相關問題