Is it possible to position an element relative to the boundary field of its parent?

Question

Refer to the following jsfiddle for 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 you can see, the “inner” box (with a red frame) is located relative to the outer labels : left:0 positions it just to the right of the border of the intruders, and top:100% means "100% of the content plus the complement, but not the border."

Unfortunately, adding box-sizing: border-box to the outer div seems inefficient.

I want to position the child directly below the border-box parents, i.e. both borders should abut no matter how thick they are. Is it possible?

Answer 1

Unfortunately, this is not possible without knowing the boundaries of the width in advance. If you don’t know the width boundaries in advance or are dynamic, you're out of luck. ¹

The area of ​​the element containing the block is indeed defined as the filling edge of the element forming the containing block. This is explicitly stated in spec and by design; descendants usually should not overflow the border of their container, unless the container has overflow: visible and does not set BFC (and even then the effect is only visual, it does not affect the layout). Otherwise, the border is no longer the border.

As a rule, if you want to lay out elements in such a way that they interact along their border or outer edges, you do not want to lay them out as ancestors and descendants. At least you want them to be brothers and sisters ² otherwise they should be completely unconnected.

This seems to me an oversight; the top: x% value should really depend on the box-sizing value of the parent ...

The purpose of box-sizing is to change the way the box size is calculated (i.e., add or add padding or borders to the dimensions specified by width and height ); while you can use it to change the size of the element’s padding field, the area of ​​the containing block, if the element generates it, is still defined by this padding field.

---

¹ _{This can be resolved using custom properties, but provided that you must assign the same custom property to both the parent border width and the child corresponding offsets, this is basically a different way of saying: “you must know the border width in advance "or at least have control over them.}

² _{Floats, for example, are highly predisposed to the borderline of the drawers, so that fields may appear to collapse in places where you usually did not expect this to happen.}

Answer 2

Try using display:table; for an external div.

Fiddle: http://jsfiddle.net/apmmw2ma/9/

Answer 3

Unfortunately, this cannot be done without repeating the widths of the boundaries of the parents.

However, if repeating the border width value is acceptable, the following solution works:

 div.inner { top: <desired top value, eg 100%>; margin-top: <parent's border-bottom-width>; left: <desired left value, eg 0>; margin-left: -<parent's border-left-width>; } 

In the future, this will be possible with calc() , which at the time of this writing is not widely supported:

 div.inner { top: calc(<desired top value, eg 100%> + <parent's border-bottom-width>); left: calc(<desired left value, eg 0> - <parent's border-left-width>); } 

If I can dream about the future, I would like to be able to refer to the values ​​of the properties of the parents / ancestors inside the expression calc() . Then I could write something like:

 /* Hypothetical code that will never work */ div.inner { top: calc(100% + parent.border-bottom-width); left: calc(0 - parent.border-left-width); } 

Answer 4

Use box-shadow

This uses the box sizing model as you would expect:

http://jsfiddle.net/apmmw2ma/6/

 -webkit-box-shadow:inset 0px 0px 0px 5px green; -moz-box-shadow:inset 0px 0px 0px 5px green; box-shadow:inset 0px 0px 0px 5px green; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;