block formatting contexts
A block formatting context is a box that satisfies at least one of the following:
- the value of “float” is not “none”,
- the used value of “overflow” is not “visible”,
- the value of “display” is “table-cell”, “table-caption”, or “inline-block”,
- the value of “position” is neither “static” nor “relative”.
The border box of the pink box shows against the right edge of the yellow box. But the margin edge is still next to the left edge of the containing block.
Negative margin would not move the pink box to the left.
Style the yellow box with:
margin-top: 80px;Style the yellow box with:
margin-top: -80px