/***************************************

 * The solution

 ***************************************/

​

.container {

  /* This is needed for position:absolute to work */

  position: relative; }

​

.elements-wrapper {

  /* Taking the element out of the flow */

  position: absolute; 

  /* Pushing the element up out of the container */

  bottom: 100%; }

​

.element {

  /* A-a-and pulling the element down 50% of it's wrapper */

  margin-bottom: -50%; }

​

​

​

/***************************************

 * Some styling to make elements visible

 ***************************************/

​

.container {

  padding-left: 1em;

  height:       15em;

  width:        25em;

  margin-left:  auto;

  margin-right: auto;

  margin-top:   10em;

  border:       1px solid red;

  background:   url(http://3.bp.blogspot.com/-onmvP1oKbSs/T_Rerfo-IRI/AAAAAAAAADs/U4g-VPa0GBU/s1600/japanese_flagLarge.gif);

  background-size: 100% 100%; }

​

​

.element {

  border: 1px solid black;

  width:  10em;

  height: 10em;

  background: url(http://farm9.staticflickr.com/8443/8009620427_5efd5b918b_z.jpg);

  background-size: 100% 100%; }