我是Web开发和设计的新手。如何使这些元素彼此之间出现?

的HTML

<!DOCTYPE html>
<html>
    <head>

        <meta charset = "UTF-8" />

        <title>
            Title
        </title>

        <link rel = "stylesheet" type = "text/css" href = "index.css" />

    </head>

    <body>
        <div id = "Container">
            <div id = "Declaration">
                <h1>
                    Hi.
                </h1>

                <h2>
                    Bye.
                </h2>
            </div>

            <br />

            <div id = "Skills">
              Some skills
            </div>
        </div>
    </body>
</html>


的CSS

div#Container
{
    position: relative;
}

div#Declaration
{
    position: absolute;
    left: 40%;
    padding-top: 250px;
}

div#Skills
{
    background-color: rgb(72, 141, 200);
}

h1
{
    font-family: "Gotham Narrow";
    font-weight: 500;
}

h2
{
    font-family: "Gotham Narrow";
    font-weight: 300;
}

h3
{
    font-family: "Gotham Narrow";
    font-weight: 100;
}


我正在尝试将技能容器置于声明以下。但是它出现在上方吗?怎么了

最佳答案

尝试以下代码,这是FIDDLE

div#Container {
    position: relative;
}
div#Declaration {
  //position: absolute;/***Removed**/
    left: 40%;
    padding-top: 250px;
}
div#Skills {
    background-color: rgb(72, 141, 200);
}
h1 {
    font-family:"Gotham Narrow";
    font-weight: 500;
}
h2 {
    font-family:"Gotham Narrow";
    font-weight: 300;
}
h3 {
    font-family:"Gotham Narrow";
    font-weight: 100;
}

07-24 09:44
查看更多