如何在Javascript中添加忽略父元素左边距和填充的子元素

请看一下这个JSFIDLE：

代码如下：

HTML

JAVASCRIPT

var divA = document.getElementsByTagName("div")[0];
var divB = document.createElement("div");
divB.className="b";

divA.appendChild(divB);

我想将child div放置在 container div，因此它与父级完全重叠。 但正如你所看到的，这是不可能的，因为 父对象的左填充

我想我可以这样做：

divB.style.left = -(divA.leftPadding + divA.leftMargin)+"px";

但我希望有一种更好的方法来做到这一点，就像Javascript中的一些本机函数一样，所以我不这么认为 我必须做这样的计算

---

另外，我希望避免将子对象设置为绝对位置。

在此处使用边框框将确保它们都符合所需的宽度。您需要给子元素一个负的左边距，其值与其父元素的左边距相同

var divA=document.getElementsByTagName（“div”）[0]；
var divB=document.createElement（“div”）；
divB.className=“b”；
女主角。附属品（女主角）
div{
宽度：200px；
高度：200px；
背景：红色；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.a{
左侧填充：6px；
}
.b{
位置：相对位置；
背景：蓝色；
左边距：-6px；
}
您可以将子对象绝对定位在（相对）父对象中，如下所示：

.parent {
    position: relative;
    padding: 10px;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

除了字符串原型上的一些陈旧（愚蠢）函数外，JavaScript本身不支持这样的东西；在这种情况下，这纯粹是一个CSS样式的问题。如果不希望容器元素的内容受到影响，那么不清楚为什么要给容器元素任何填充。
divB.style.left = -(divA.leftPadding + divA.leftMargin)+"px";

.parent {
    position: relative;
    padding: 10px;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}