標題圖片是固定的位置

我工作的人一個網站，我需要一個頭圖像添加到網站的左上角。但是，發生了什麼是圖像似乎是在一個固定的位置，所以每當我移動網頁不同的分辨率，它似乎留在當前位置，而一切舉動。最重要的是，我需要圖像欠重疊導航，但每當我改變圖像的高度，它只是改變了其移動導航更遠的頭本身的高度...標題圖片是固定的位置

The Image I am referring to is in the html <img src="newImage/papaPic.jpg"> with the CSS being #header img{...}

CSS

body { 
    background: url(../newImages/headerBackground.jpg) repeat; 
    font-family: Arial, Helvetica, sans-serif; 
    //font-size: 14px; 
    margin: 0; 
    padding: 0;  
} 
#header { 
    background: url(../images/bg-header.png) repeat-x bottom center; 
    margin: 0; 
     text-align: center; 
     display: block; 
} 
#header img { 
    display: block;  
    margin: 0 auto; 
    width: 230px; 
     margin-left:0px;   
     height:250px;  
} 

#header ul { 
    background: url(../images/menu-border.gif) no-repeat bottom left; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 0 0 0 1px; 
    width: 970px; 
     position:relative; 
     left:5%; 


} 

#header ul li { 
    background: url(../images/bg-menu.gif) repeat-x bottom center; 
    border-top: 2px solid #4f5342; 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

HTML

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Jay Cousins</title> 
    <link rel="stylesheet" href="css/site.css" type="text/css"> 
</head> 
<body> 
    <div id="header"> 
      <img src="newImages/papaPic.jpg"> 
     <ul> 
      <li class="selected"> 
       <a href="index.html">home</a> 
      </li> 
      <li> 
       <a href="about.html">Opportunities</a> 
      </li> 
      <li> 
       <a href="admission.html">Project Management</a> 
      </li> 
      <li> 
       <a href="programs.html">About Jay</a> 
      </li> 
      <li> 
       <a href="calendar.html">Community</a> 
      </li> 
      <li> 
       <a href="blog.html">Contact</a> 
      </li> 

     </ul> 
    </div>

來源

2014-12-10 Kipperman

你說的是什麼樣的形象的position: absolute的position: relative和position: relative和z-index？該''或'背景：......;'？ – putvande 2014-12-10 21:42:35

我更新的問題，對不起 – Kipperman 2014-12-10 21:44:08

這是你需要什麼？

body { 
    background: url(../newImages/headerBackground.jpg) repeat; 
    font-family: Arial, Helvetica, sans-serif; 
    //font-size: 14px; 
    margin: 0; 
    padding: 0;  
} 
#header { 
    background: url(../images/bg-header.png) repeat-x bottom center; 
    display: block; 
    margin: 0; 
    position: relative; 
    text-align: center; 
} 
#header img { 
    display: block; 
    height:250px;  
    position: absolute; 
    width: 230px;   
} 

#header ul { 
    background: url(../images/menu-border.gif) no-repeat bottom left; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 20px 5px 0 5px; 
    position: relative; 
    width: 970px; 
    z-index: 10; 
} 

#header ul li { 
    background: url(../images/bg-menu.gif) repeat-x bottom center; 
    border-top: 2px solid #4f5342; 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

最重要的變化是在IMG上的#header在UL

來源

2014-12-10 22:39:25 user1120808

標題圖片是固定的位置

回答

相關問題