html - 如何垂直向上移动图像？

Question

我的网站上有一个 Logo 。几乎是第一件事。但这还差得很远。我想知道如何将它向下移动。该网站目前看起来像这样:http://i.gyazo.com/29b9116903051e82640f63b7a1a14464.png

如您所见， Logo 非常靠下，而不是靠近顶部。我目前的标题代码(其中有 Logo )是这样的:

<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>

这似乎解决了我的问题:

        <!-- 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

严格来说，这更多是css的问题，而不仅仅是HTML的问题。

您的内联 css(style= 东西)不起作用，因为您必须添加:

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

您可能想尝试:

position:absolute;

对比

position:relative;

重要提示:正如 Chris Coyer 在下面引用的文章中指出的那样，绝对定位仅在您的元素位于定位已设置为 position:relative; 的 div(任何元素)内时才有效em>( 或者 absolute 或者 fixed -- 只能不能是默认的 position 设置，也就是 position:static) 所以，添加这个:

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

有关详细信息，请参阅以下引用资料。

来源:

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