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

Question

Please take a look at this jsfiddle:

http://jsfiddle.net/dd4g4re5/

This is the code:

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

I want to position the child div in top of the container div, so it completely overlap the parent. But as you can see, that is not possible because of the left padding of the parent.

I guess I could do something like this:

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

But I hope there is a batter way to do that, like some native function in Javascript, so I don't have to make that kind of calculations.

Also, I would like to avoid setting the child an absolute position.

Answer 1

Using border-box here will make sure they both fit the desired widths. And you'll want to give the child element a negative left margin the same value as it's parent left padding.

 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

You could position the child absolutely within the (relative) parent, like so:

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

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