Elements taking over the space of an element with position absolute

I am trying to have a div at the top of my page that fits with no space against the top and sides.

All the example I have seen on how to do this put the div position to absolute.

But when I do this, the following img sibling moves to the top of the page with the previous div.

So I have two questions. Why does the following sibling move? Also, how can I have a div fit with 0 space against the top, without having position:absolute

div {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #888888;
  width: 100%;
  height: 100px;
}

<body bgcolor="#000000">

  <div>
    <h1>HEADER</h1>
  </div>

  <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>

</html>

Solution

You don't need position: absolute to align things to top just use margin: 0 on the body, h1 Like:

body, h1 {
  margin: 0;
}

Have a look at the snippet below:

body, h1 {
  margin: 0;
}

div {
  background: #888888;
  width: 100%;
  height: 100px;
}

<!DOCTYPE html>
<html>
<body bgcolor="#000000">

<div>
    <h1>HEADER</h1>
</div>

<img src="http://placehold.it/304x228" alt="Mountain View" style="width:304px;height:228px;">

</body>

Hope this helps!