Question

我是网络开发和设计的新手。如何使这些元素相互显示？

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

我正在尝试将技能容器置于BELOW声明之下。但它出现在上面？这有什么不对？

Answer 1

请尝试以下代码，此处为 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;
}

Answer 2

这就是发生的事情：

1）您的HTML是正确的。但是，#skills应低于#declaration 2）#declaration设置为绝对定位;这意味着该容器从文档流中弹出并悬停在所有内容上。它的一切都在#skills上空盘旋 3）#declaration的填充顶部设置为250px; #declaration不仅现在悬停在#skills上，其内容现在被推下250px！

从技术上讲，#declaration悬停在#skills上方。它看起来像声明低于#skills，因为它的内容（不是它的容器！）被推下250px。

要解决您的问题，我会摆脱绝对定位，而是将其左边距设置为40％。

希望这有帮助。

Answer 3

为什么你使用绝对然后相对，如果你使用绝对你不能使用它。试试吧..就这样改变你的CSS。

div#Container
{
    position: relative;
}

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

那是

Answer 4

这里不需要使用定位（只要我理解布局）。

只有这个CSS，你应该能够实现你正在寻找的东西：

div#Declaration
{
    margin-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;
}

Demo

Resource material

Answer 5

使用

vertical-align: middle;

垂直放置元素的行

如何垂直排列元素？

5 个答案: