如何实现首页链接图片按钮与顶部蓝色导航栏叠加？

只需给承载图片的#homeimage元素添加几行CSS样式，就能实现图片叠加在导航栏上的效果，具体步骤和代码如下：

修改后的完整代码 #

CSS 部分 #

.upperblue {
    width: 100%;
    background-color: rgb(71, 103, 245);
    height: 100px;
    position: relative; /* 关键：让子元素的绝对定位以该导航栏为参照 */
}

#homeimage {
    position: absolute; /* 开启绝对定位，脱离文档流 */
    top: -40px; /* 向上偏移，让图片一部分悬在导航栏上方，数值可按需调整 */
    left: 20px; /* 距离左侧的位置，可根据需求修改 */
    z-index: 10; /* 确保图片层级高于导航栏，避免被遮挡 */
    margin: 0; /* 清除p标签默认外边距，防止布局错位 */
}

#homeimage img {
    display: block; /* 去掉图片下方的默认空白间隙 */
}

HTML 部分 #

<div class="upperblue"></div>
<p id="homeimage">
    <a href="/index.html">
        <img src="https://lh3.googleusercontent.com/EiXgCES3j3b98a6ADBoU37yzcAO1shECNmOzbCZn2HYcUBPW4xiFmCHsXCy-AmWGTn5ySEU3U-Rpq2H_NrXjjuSg-Qrr3m74XSVF0y9VD6ayXRy2zYaTVqONCjlneaMfsb352Z0S=w2400" height="185" width="426">
    </a>
</p>

关键属性说明 #

• position: absolute：让图片容器脱离正常文档流，可自由定位在导航栏上方。
• top: -40px：调整数值能改变图片上下偏移程度，负数向上移，正数向下移。
• z-index: 10：保证图片层级高于导航栏，不会被遮挡。
• 清除p标签默认外边距：避免图片周围出现不必要空白影响布局。

内容的提问来源于stack exchange，提问作者Dan Diaconescu In direct