css - 使用 HTML/CSS 向下移动图像

Question

我需要将蓝色导航栏下方的图像向下移动，以便它与下面的主体内容相连(它们应该在网页内容周围创建一个阴影框的外观)。下面是 HTML页。我正试图将其向下移动的图像 boy_top.png。有谁知道如何做到这一点？我还包含了“主要”、“页面”和“菜单”部分的 CSS。蓝色导航区附在“菜单”部分，主要内容区附在“主要”部分，它们都封装在“页面”css 中。

    <div class="page">
        <header>            
        <div style="margin: 20px;">
@*                <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
            <span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
            <span style="color: white; font-size: 18px; ">&nbsp;&nbsp; </span>
        </div>
@*            </a>*@
@*            <div id="logindisplay">
            @Html.Partial("_LogOnPartial")
        </div>*@
            <nav>
                <ul id="menu">
                    <li>@Html.MenuLink("Agents", "Index", "Agent")</li>
                    <li>@Html.MenuLink("Products", "Index", "Product")</li>
                    <li>@Html.MenuLink("Product Training", "Index", "Course")</li>
                    <li>@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
                    <li>@Html.MenuLink("Help", "About", "Home")</li>
                </ul>
            </nav>
    </header> 
    <img src="../../Content/images/body_top.png"  id="topPic" alt="tag"/>       
        <section id="main">            
        @RenderBody()
    </section>
    <footer>
        <span style="color: Gray;"> Copyright © 2012 Symetra Life Insurance Company. All rights reserved. Symetra® is a registered service mark of Symetra Life Insurance Company. For Internal Use Only. </span>
    </footer>
    </div>

CSS

    #main 
    {
        background-image: url('../../Content/Images/body_rpt.png');
        background-repeat: repeat-y;
        clear: both;  /*add this so tabs go left! */
        padding: 15px 15px 15px 30px; /*30px 30px 15px 30px; */
        background-color: #fff;
        /*border-radius: 4px 0 0 0;*/
        -webkit-border-radius: 4px 0 0 0;
        -moz-border-radius: 4px 0 0 0;
    }

    .page {
        width: 83.7em;
        margin-left: auto;
        margin-right: auto;
    }

    ul#menu {
        /*border-bottom: 1px #5C87B2 solid;*/
        background-image: url('../../Content/Images/Nav-Background.gif');
        padding: 0 0 2px;
        position: relative;
        margin: 0;
        text-align: right;
    }

    ul#menu li {
        display: inline;
        list-style: none;
    }

    ul#menu li#greeting {
        padding: 10px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        color: #fff;
    }

    ul#menu li a {
        padding: 10px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        /*background-color: #e8eef4;*/
        color: Navy; /*#034af3; */
        border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
    }

    /*ul#menu li a:hover {
        background-color: #fff;
        text-decoration: none;
    }*/

    ul#menu li a:active {
        background-color: #a6e2a6;
        text-decoration: none;
    }

    ul#menu li.selected a {
        background-color: #fff;
        color: #000;
    }
    /* this one is for the active tab  */
    .current 
    {
        font-size: 120%;
        font-weight: bold;
        border-style: double;
    }

Answer 1

将图片放在主体中，将主体设置为position:relative，然后将图像设置为position:absolute；顶部:0；左:0；

如果不能把图片放在主体里面，那就给主体加一个负的margin-top。这有点“hacky”，但仍然有效。