标题 - 将图像放置在导航栏旁边，并使图像"stick"导航栏。之后，两个元素在标题底部水平居中

Question

这有点难以解释。我有一个相当大的标题，宽度是文档宽度的90%。我需要中心的导航条水平在头部底部与图像"粘"在左侧。图像本身比导航条大一些所以导航条不应该因为图像而变大。在那一半的图像的顶部应该"伸出"的标题，所以我猜它与绝对定位有关。我知道如何定位导航条在底部，但我不知道如何做其他的东西。我知道这是一个可怕的解释，所以我画了一些东西来告诉你我的意思:绘画

我希望有人能帮我。

我试着这样做(我知道这不是最好的例子，但我就是这么做的):

    * {
        padding: 0;
        margin: 0;
    }
    #header {
        position: relative;
        width: 80%;
        height: 700px;
        margin: 0 auto;
        background-color: yellow;
    }
    #main_nav {
        position: absolute;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 80%;
    }
    #main_nav > ul {
        display: block;
        list-style-type: none;
        width: 100%;
        text-align: center;
    }
    #main_nav > ul li {
        display: inline-block;
        width: 15%;
        height: 70px;
        line-height: 70px;
        color: white;
        text-align: center;
        background-color: blue;
    }
    .image {
        width: 350px;
        height: 185px;
        line-height: 185px;
        background-color: red;
        color: white;
        font-size: 48px;
        text-align: center;
        margin-bottom: -120px;
    }
    main {
        margin-top: 150px;
        padding: 50px;
        text-align: center;
        font-size: 32px;
    }

身体

:

<div id="header">
    <nav id="main_nav">
        <div class="image">IMAGE</div>
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
            <li>Nav 4</li>
        </ul>
    </nav>
</div>
<main>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore aperiam fugit consequuntur voluptatibus ex, sint iure in, distinctio sed dolorem aspernatur veritatis repellendus dolorum voluptate, animi libero, officiis eveniet accusamus!
</main>

我想让图像粘贴到左侧的导航和中心水平(没有重叠，因为它目前正在发生)。负面定位真的是移动形象的正确方式吗?

Answer 1

您可以尝试使用margin: 0 auto;居中容器，然后将图像定位为负上边距。然后将菜单部分定位为左填充，以推过图像的宽度。