Html 如果删除边框，Divs位置将更改

我有三个div。一个在另一个里面。第一个div（黄色背景）具有绝对宽度和高度。第二个div（绿色背景）位于第一个div内，具有100%的宽度和高度。位于第二个中的最后一个（红色背景）具有水平和垂直居中的参数。 问题是，只有在第二个div有边界的情况下，一切都能正常工作

这是密码

<div  id="div1" style="width: 100; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

我不需要这个边框，如果我删除它，那么我的div的位置就会发生巨大的变化

您可以查看或尝试

请不要建议我让边界隐形、透明或诸如此类的东西

请帮我保留div的位置，不要使用边框。

---

P.S用户jvilhena建议我在第二个div中使用position:absolute。它解决了这个问题，但我不能在代码中使用它。请告诉我另一种方法。

第二个div的背景位置不知怎么地向上“移动”，可能是因为第三个div的边距：-30px（如果你将它们并排放置，你可以看到）。如果在第二个div中添加position:absolute，则会修复以下问题：

<div  id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

<div id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 250px; top: 20px; z-index: 2">
<div id="div2" style='width:100%;height:100%;background-color:green;position: absolute;'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div without border
</div>
</div>
</div>

带边框的div
无边界div

我明白你的意思。等一下，这是一种非常奇怪的行为。我试着去掉了第二个div的背景色，它似乎纠正了对齐方式（在将“宽度：100；”更改为“宽度：200px；”以使其更明显之后）。你需要背景色吗？我需要第二部的背景色。谢谢！立场：绝对解决了问题

<div  id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

<div id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 250px; top: 20px; z-index: 2">
<div id="div2" style='width:100%;height:100%;background-color:green;position: absolute;'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div without border
</div>
</div>
</div>