html - CSS - 如何在 2 个部分 div 之间放置图像？

Question

我如何将图像垂直放置在 2 个部分 div 之间，以便我可以完成以下操作:

1. 设置图像与部分重叠的确切宽度。示例 - 我希望图像高度的 30% 成为顶部 div 的一部分，图像高度的 70% 成为底部 div 的一部分

2. 针对上述目标在所有屏幕尺寸/浏览器上保持一致

下面是一个例子来说明我的意思:

据我所读和所见，很多人只是将边距设置为负像素数量或使用顶部/底部并设置像素数量，但我认为这在屏幕尺寸之间不兼容

非常感谢你的帮助，这意义重大

Answer 1

试试这个，你可以在 div 中插入 image id img

#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}

<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>

使用 % 表示宽度

    #div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
            #div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
            #image{position:absolute;bottom:-20%;/* 2/3=66.6 */
              left:35%;z-index:4;
            width:30%;
            height:30%;background:green;
            }

    <div id="div1">  <div id="image"></div></div>
           
            <div id="div2"></div>