html - Is it possible to position an element relative to the border-box of its parent? -

consider following jsfiddle reference:

http://jsfiddle.net/apmmw2ma/

<div class='outer'>     <div class='inner'>         inner.     </div>     outer. </div> 

div.outer {     position: absolute;     left: 10px;     top: 10px;     border: 5px solid green;     padding: 10px; } div.inner {     position: absolute;     left: 0;     top: 100%;     border: 10px solid red;     padding: 15px; } 

as can see, “inner” box (with red border) positioned relative outer’s padding-box: left:0 positions right of outer’s border, , top:100% appears mean “100% of content plus padding, not border”.

unfortunately, adding box-sizing: border-box outer div seems have no effect.

i want position child element directly below parent’s border-box, i.e. 2 borders should abut no matter how thick are. possible?

unfortunately not possible without knowing border widths in advance. if don't know border widths in advance, or if dynamic, you're out of luck.¹

the area of element's containing block indeed defined padding edge of element forming containing block. explicitly stated in spec, , design; descendants aren't supposed overflow border of container, unless container has overflow: visible , not establish bfc (and then, effect visual; doesn't affect layout). otherwise, border isn't of border anymore.

generally, if want lay out elements such interact border or outer edges, don't want lay them out ancestors , descendants. @ least want them siblings², otherwise should unrelated.

this seems oversight me; meaning of top: x% should depend on box-sizing value of parent...

the purpose of box-sizing change how size of box calculated (i.e. whether or not padding or borders should add dimensions specified width , height); while can use alter size of element's padding box, area of containing block, if element generates one, still defined padding box.

---

¹ _{this conceivably solved custom properties, on precondition must assign same custom property both parent's border-width , child's respective offsets, way of saying "you must know border widths in advance" or @ least, have control on them.}

² _{floats, example, highly predisposed border edge of boxes, so they can appear collapse margins in places wouldn't expect occur.}