如何添加一个忽略Javascript中父级的左边缘和填充的子元素

Question

请看看这个jsfiddle：

http://jsfiddle.net/dd4g4re5/

这是代码：

HTML

<div class="a"></div>

CSS

div{
    width: 200px;
    height: 200px;
    background: red;
}

.a {
    padding-left: 6px;
}
.b {
    position: relative;
    background: blue;
}

JAVASCRIPT

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

divA.appendChild(divB);

我想将子div放在容器div的顶部，因此它与父级完全重叠。 但正如您所看到的那样，由于父级的左侧填充，这是不可能的。

我想我可以这样做：

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

但是我希望有一种更好的方法可以做到这一点，就像Javascript中的一些本机函数一样，所以我不必进行那种计算。

另外，我想避免让孩子处于绝对位置。

Answer 1

在这里使用border-box将确保它们都符合所需的宽度。 并且你想要给子元素一个负左边距和它的父左边距相同的值。

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

 div{ width: 200px; height: 200px; background: red; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .a { padding-left: 6px; } .b { position: relative; background: blue; margin-left: -6px; } 

 <div class="a"></div> 

Answer 2

您可以将孩子完全放在（相对）父级中，如下所示：

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

http://jsfiddle.net/bvaughn/ouxsdmfc/