CODEWITHSUNDEEP
htmlcss
phlipsgeisler
phlipsgeisler

Reputation: 101

box-sizing + border + absolute child

I recently discovered this problem.

Check for demo on jsfiddle

As for me, the outline behaves wrong, doesn’t it? Shouldn’t the box model of the .outside element include its borders, so that the absolute positioned child element outlines those borders aswell?

Is this a known problem? Is this really correct behavior? If so, could someone explain to me why it is?

What I expected to have as result

Please do not comment on how to solve the problem. But please explain why the problem occurs.

Thanks in advance :)

Regards phlips

Upvotes: 9

Views: 8165

Answers (3)

101 Coding und Design
101 Coding und Design

Reputation: 138

In this case when using position: absolute ..

.. the containing block is formed by the padding edge of the ancestor.

See CSS Specifications - 10.1 Definition of "containing block"

For whatever reason..

Upvotes: 3

Jakob
Jakob

Reputation: 3546

Just box-sizing: border-box is not enough, you need to inherit width and height from parent:

.inside {
  position: absolute;
  outline: #00f solid 2px;
  width: inherit;
  height: inherit;
}

Check here https://jsfiddle.net/2mytb43a/3/

Upvotes: 4

Huy Nguyen
Huy Nguyen

Reputation: 2070

This is normal, because position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.

With parent, you have 2 attributes:

border-right: 50px #f5f solid;
border-bottom: 50px #f5f solid;

If you remove it, outline will be full size, because you set 4 attributes: top, right, bottom, left is 0. (change it to see the change).

Upvotes: 0

Related Questions