标题图片固定位置

Question

I am working on a site for someone and I need to add a header image to the top left of the website. 我正在为某人创建一个网站，我需要在该网站的左上方添加标题图片。 But whats happening is the images seems to be in a fixed position so whenever I move the webpage to different resolutions, it seems to stay where it is while everything else moves. 但是发生的是图像似乎处于固定位置，因此每当我将网页移动到不同的分辨率时，其他一切都在移动时，它似乎停留在原处。 On top of that, i need to image to underlap the navigation, but whenever I change the height of the image, it just changes the height of the header itself which moves the navigation farther... 最重要的是，我需要对导航进行图像叠加，但是每当我更改图像的高度时，它都只会更改标题本身的高度，从而使导航更进一步...

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

CSS 的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

<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>

Answer 1

Is this what you need? 这是您需要的吗？

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;
}

The most important changes are the position: absolute on the img, the position: relative on the #header and the position: relative and z-index on the ul 最重要的更改是position: absolute img上的position: absolute ， position: relative #header上的position: relative位置和position: relative ul上的position: relative和z-index

标题图片固定位置

问题描述

1 个解决方案

解决方案1
0 2014-12-10 22:39:25

标题图片固定位置

问题描述

1 个解决方案

解决方案1 0 2014-12-10 22:39:25

解决方案1
0 2014-12-10 22:39:25