How Do You Stack Two Children Perfectly on Top of Each Other?

The Question You have a parent container with two children, and you want both children to completely overlap — same position, same size, stacked like cards in a deck: class= "container" > class= "foo" > class= "bar" > So we need to pull .foo and .bar out of the normal document flow so they both sit in the exact same spot inside .container . Solution 1: Absolute Positioning The classic answer. Make the parent a positioning context , then absolutely position the children to fill it. .container { w