Html CSS-如何在两个分区之间放置图像？

如何在两个剖面div之间垂直放置图像，以便完成以下操作：

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

为实现上述目标，在所有屏幕尺寸/浏览器上保持一致

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

根据我所读到的和看到的，很多人只是将边距设置为负像素量，或者使用“上/下”设置像素量，但我认为这在不同的屏幕尺寸上是不兼容的

---

非常感谢您的帮助，这意味着很多

尝试一下，您可以在

div

中插入

图像

，具有

id

img

#div1{宽度：400px；高度：100px；背景：红色；}
#div2{位置：相对；宽度：400px；高度：100px；背景：黄色；z索引：1；}
#图像{宽度：40px；高度：40px；背景：绿色；位置：相对；
左侧边距：180px；顶部边距：-20px；底部边距：-20px；z索引：2}

---

您可以在图像元素周围添加两个父元素，其中一个具有

位置：相对

和另一个（嵌套div）的

位置：绝对。然后对于
img
tag，应用
margintop:-30%将其放置在所需位置

要使图像居中：我们将
左侧：50%
设置为内部div（图像的父级），并将
左侧边距设置为：-50%用于图像，如下所示：


#div1{背景：#e0f0e0；填充：1em；}
#div2{背景：#e0f0；填充：1em；}
#divImg{位置：相对；边框：1px实心红色；}
#divImg2{位置：绝对；边框：1px纯蓝色；左侧：50%}
#divImg img{左边距：-50%；左边距：-30%；}
第1节第1部分的内容……

123
456

第2节第2部分的内容…



ABCD
EFGH

123
456

发布您的代码您尝试过的内容此网站用于解决问题扫描您将图像直接放在问题正文中或包含一些您尝试过的html？这是图像。。。。对于代码，我基本上只是使用了我所描述的…这是负边距乘以px的数量，但是对于不同的屏幕有不同的结果，但是这使用了
px
单位作为边距，而不是要求的百分比单位@S.Serp谢谢，我已经升级了：）不，它还不好，它应该设置垂直位置，30%的图像高度在顶部，70%在下方（见我在编辑问题中的图片）。百分比边距在你的代码中不容易使用。我想现在可以了