html - 如何在 css 中的各个部分之间获取图像

Question

我正在处理一个页面，但卡住了。 (是的，我是初学者 :-)。)

我有一个标题，后面跟着一个部分。我想要标题和部分之间的图片。我已经定位了图像，但它一直在标题“下方”，因此您看不到它的一半。我一直在尝试使用 z-index 但我想工作？我的目标是在标题部分有一半的图片，另一部分有一半的图片。

有什么建议吗？下面是我的代码开头(为了方便，我省略了html，head)。

<div class="big_mama">
    <header>
        <nav class="main_nav">
            <ul>
            </ul>
        </nav>
    </header> 

    <section id="section">
        <article class="article">
            <div class="pictures">
                <img src="#" />
            </div>
       </article>
        <article class="article">
            <div class="pictures">
                <img src="#" />
            </div>
       </article>
</div>

Answer 1

首先，您应该将图片放在页眉部分。使用属性position:relative 设置标题，为要放置的图像设置position:absolute 并设置bottom:-50% 或底部:0px； margin-bottom:-50%.

<header style="position:relative">
    <img src="#" style="position:absolute; bottom:-50%">

这应该可以解决问题。

干杯。