标题图片是固定的位置

我工作的人一个网站，我需要一个头图像添加到网站的左上角。但是，发生了什么是图像似乎是在一个固定的位置，所以每当我移动网页不同的分辨率，它似乎留在当前位置，而一切举动。最重要的是，我需要图像欠重叠导航，但每当我改变图像的高度，它只是改变了其移动导航更远的头本身的高度...标题图片是固定的位置

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

标题图片是固定的位置

回答

相关问题