Just erase the position: absolute It takes the element out of the document flow, usually causing overlaps as you experienced it:

body {
  margin: 0;
}

.logo {
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
}

<img class="logo" src="https://via.placeholder.com/400" alt="logo">

<h1>title goes here</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis dolores cum hic aspiquid harum vitae minus, at itaque!</p>

I’m going to assume that by ‘above’ you mean that the text is stacked on top of the image. Could use some clarification.

But based on what you sent, here is what I think is happening.

Position absolute will take the logo out of the normal flow of the page. In your case, it is putting the logo at the top.

Your text however, is in the normal flow of the page, which also starts at the top.

This makes both the text and the logo start at the same height and stack on top of each other.

To fix this, put your text in a container div, and give it enough top margin to push it down below the logo.

Alternatively, you could make a header div avove the text, give it some height. This will push the text down. Next put the logo inside the header, and position it from there. Perhaps with position relative.

I want to position a logo to the very top left of a page. There should be no other next above it.

In the html I have placed the logo image and then an H1 and a paragraph of text.

Using the following CSS, why does the text appear above the logo?

When it comes to the order of elements on the page, I want the logo to be the first item.

body {
  position: relative;
  margin: 0;
}

.logo {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

<img class="logo" src="https://via.placeholder.com/400" alt="logo">

<h1>title goes here</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis dolores cum hic aspiquid harum vitae minus, at itaque!</p>