標題圖片固定位置

Question

我正在為某人創建一個網站，我需要在該網站的左上方添加標題圖片。 但是發生的是圖像似乎處於固定位置，因此每當我將網頁移動到不同的分辨率時，其他一切都在移動時，它似乎停留在原處。 最重要的是，我需要對導航進行圖像疊加，但是每當我更改圖像的高度時，它都只會更改標題本身的高度，從而使導航更進一步...

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>

Answer 1

這是您需要的嗎？

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

最重要的更改是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