how do I position an element relative to the outer edge of parent's border?

Question

I'm trying to position four elements at the four corners of a parent element. The parent element has a border whose size changes dynamically. I'd like to position the elements such that they touch the outer edge of the border, and preferably do it in such a way that I don't have to worry about doing something when the border changes size.

Using absolute positioning, I'm able to get them positioned relative to the inside the border: http://jsfiddle.net/V5jFx/1/

I can't figure out how to do it relative to the outside, however.

It's not mandatory that the four corner elements be children of the parent, and I'm willing to use javascript, although again I would really prefer not have to detect changes to the size of the border.

Answer 1

http://jsfiddle.net/wyKG2/1/

Create a wrapper whose inside border matches the outside border of the border div. Now you can do whatever you want width wise, and this will work.

Answer 2

You can use negative values to position outside the parent.

http://jsfiddle.net/V5jFx/10/

You can then use JavaScript to adjust based on width.

It's over the top if you can use a container. If you can, mark FrankieTheKneeMan's correct. It's simpler and just as effective.

Answer 3

http://jsfiddle.net/V5jFx/2/

You'll have to use javascript for varying border widths, but the top / right values need to be negative child width + border width.