How can I move my image vertically up?

Question

I have a logo on my site. Just about the first thing there is. But it's pretty far down. I wanted to know how I can move it down. The website currently looks like this: http://i.gyazo.com/29b9116903051e82640f63b7a1a14464.png

As you can see the logo is pretty far down and not near the top. The current code I have for the header (which has logo in it) is this:

<div id="header">
            <img src="images/Logo.png" alt="" height="150" style="left: 0px; top: 0px" width="150" />
            <h1>Hey there! I'm Mario!</h1>
            <p> <h2>  AKA IridiumKills </h2> </p>
            <p>I'm a Coder, Gamer, DJ, Music Producer, and Designer!</a>
            <br />
            Now that you know a bit about me,why don't you scroll down to see some more?</p>
            <p> <span class="logo fa fa-arrow-down"> </span> </p>
        </div>

This seemed to fix my problem:

        <!-- Header -->
        <div id="header">
            <img src="images/Logo.png" alt="" height="225" style="position:absolute;left:565px; top:40px;" width="225" />
            <h1>Hey there! I'm Mario!</h1>
            <p> <h2>  AKA IridiumKills </h2> </p>
            <p>I'm a Coder, Gamer, DJ, Music Producer, and Designer!</a>
            <br />
            Now that you know a bit about me,why don't you scroll down to see some more?</p>
            <p> <span class="logo fa fa-arrow-down"> </span> </p>
        </div>

Answer 1

Strictly speaking, this is more of a css problem, not just an HTML problem.

Your inline css (the style= stuff) is not working because you must add this:

style="position:absolute;left:0px; top:0px;"

You might want to experiment with:

position:absolute;

vs

position:relative;

Important: As noted by Chris Coyer in the below referenced article, absolute positioning only works if your element is inside a div (any element) where the positioning has been set to position:relative; (or absolute or fixed -- it only cannot be the default position setting, which is position:static) So, add this:

<div id="header" style="position:relative;">

See the below reference for more info.

Sources:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/