Question

请看一下这个jsfiddle：

这是代码：

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将确保它们都符合所需的宽度。并且你想要给子元素一个负左边距与它的父左边距相同的值。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

2 个答案: