在標題下面放置一個div

我有一個帶有背景圖片的網站。我也有一個標題，它完全適合頁面頂部。我現在想要做的是我想添加兩個<div>的標題下的圖像頂部，但它似乎不可能。我嘗試了所有可能的定位方式，顯示方式。 <div>的填充也不起作用 - 它會將背景圖像向下推。這裏的jsfiddle：jsfiddle.net/XqHAj在標題下面放置一個div

這裏的html代碼：

<body> 
<div id="wrap">  


    <header id="header"> 
     <h1>Portfolio</h1> 
      <div id="menu"> 
      <ul class="nav"> 
       <a href="#" id="pull">&#x2630;</a> 
       <li><a href="index.php?site=home">Home</a></li> 
       <li><a href="index.php?site=about">About Me</a></li> 
       <li><a href="index.php?site=works">Works</a></li> 
       <li><a href="index.php?site=contact">Contact</a></li> 
      </ul> 
      </div> 
    </header> 

     <div class="container"> 

      <div class="left-container-box"> 
       Bacon ipsum dolor sit amet porchetta shoulder chuck t-bone kevin rump pork chop landjaeger bresaola shank. Tail ribeye corned beef meatball capicola ham hock, beef ribs tongue jerky swine tri-tip pork chop spare ribs bresaola porchetta. Salami ham ham hock fatback venison, bresaola pork belly pastrami tongue. Jowl pork loin corned beef, spare ribs meatball filet mignon drumstick beef ribs shankle landjaeger pastrami t-bone bresaola. Hamburger ball tip frankfurter pastrami leberkas andouille pork loin pig shoulder. Tail tenderloin t-bone kevin swine tri-tip strip steak boudin bacon pastrami. Frankfurter bacon ribeye, biltong salami pancetta tenderloin. 
      </div> 

      <div class="right-container-box"> 

      <div> 

     </div> 

<div id="wallpaper"><img src="pictures/wallpaper.jpg" width="100%" height="100%" alt="wallpaper"> 

</div> 

</body>

這裏的CSS代碼：

html 
{ 
    height:100%; 
    width:100%; 
    margin: 0px; 
    padding: 0px; 
} 
body 
{ 
    font-family: "Sanchez-Regular"; 
    color:#BBBBBB; 
    height:100%; 
    margin:0; 
    padding:0; 
} 

#wallpaper 
{ 
    position:relative; 
} 

#header{ 
    width:100%; 
    height:6em; 
    background-color:#100f0f; 
    position:absolute; 
    z-index:1000; 
    -webkit-box-shadow: 1px 1px 0px #333232; 
    -moz-box-shadow: 1px 1px 0px #333232; 
    box-shadow: 1px 1px 0px #333232; 
} 

/*NAVIGATION BAR STYLING*/ 
li{ 
    display:inline; 
    padding:3.2em; 
    font-size:120%; 
    list-style-type:none; 
} 
.nav{ 
    margin: 0 auto; 
    text-align:center; 
    list-style-type:none; 
} 

#menu a{ 

    list-style-type:none; 
    text-decoration:none; 
    color:#BBBBBB; 
    -webkit-transition: all 0.5s; 
} 

#menu a:hover{ 
    color:#807a7a; 
} 

#pull{ 
    display:none; 
} 
#menu{ 

    margin:auto; 
} 
/*NAVIGATION BAR STYLING ENDS*/ 

/*BODY STYLING*/ 

.container{ 

} 

.left-container-box{ 

}

提前感謝！

來源

2014-02-25 raqulka

你可以做一個小提琴（http://jsfiddle.net）併發布它？ – Zword

*「頁腳完全適合頁面頂部」*？你想要什麼的一些說明性例子會有所幫助。 – Qtax

@Qtax起初我很困惑，但我認爲他們的意思是「頂」，如「在前」 – SaturnsEye

第一設置壁紙DIV 刪除圖片標籤背景圖片「圖片/ wallpaper.jpg從中

放了兩個格在壁紙DIV

來源

2014-02-25 09:00:03

爲什麼這會是一個好主意？我希望背景圖片適合所有解決方案。 – raqulka

然後給身體背景圖片 –

你需要確保你設置了負z-index和position:absolute你想要的格「後面」頁腳

EXAMPLE

.image { 
    position:absolute; 
    width:300px; 
    z-index:-999; 
    bottom:0px;  
}

來源

2014-02-25 09:00:30 SaturnsEye

什麼z-index wiil做什麼？ –

@ChiragSutariya z-index影響圖層，所以你可以坐在前面或後面的元素 – SaturnsEye

確定明白..... –

在標題下面放置一個div

回答

相關問題