Move a DIV vertically by -100% of its height

Question

I want to move a DIV vertically by -100% of its height.

• % values doesn't work.
• The height of the image is set to 100vh. So I know I can just do top: -100vh, but I'm trying to understand why the code below doesn't work.
• I tried with margin-top: -100% but it's not positioned correctly. This is how it's rendered on my browser (Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36).
• absolute positioning is not allowed on my case.
• While a (now deleted) answer resolved it using transform, I'm interested in a less experimental approach. MDN warns about using transform.

In the snippet, I'm trying to place div2 behind (or above, doesn't matter) div1. I tried with relative and top: -100%, but isn't working.

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  top: -100%;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

Answer 1

The percentage value is relative to the size of the container which is the size of body tag. You can set html, body { height: 100%; } to make it work.

html,
body {
  height: 100%;
  margin: 0;
}

.div1,
.div2 {
  height: 100%;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  top: -100%;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

Or, use negative margin margin-top: -100vh;.

body {
  margin: 0;
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  margin-top: -100vh;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

Or, use vh of top: -100vh; rather than percentage.

body {
  margin: 0;
  overflow: hidden; /* hide empty space caused by offset */
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  top: -100vh;
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

Or, use transform: translateY(-100vh);.

body {
  margin: 0;
  overflow: hidden; /* hide empty space caused by offset */
}

.div1,
.div2 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  position: relative;
  transform: translateY(-100vh);
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>

You can also set both divs to position: absolute; with full page width and height, by default div2 has higher stacking order as it renders later in the DOM, or use z-index to adjust that.

.div1,
.div2 {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.div1 {
  background-image: url("http://lorempixel.com/1920/1080/cats/");
}

.div2 {
  background-image: url("http://lorempixel.com/1280/720/food/");
}

<div class="div1"></div>
<div class="div2"></div>