Question

您可以在Design Prototype上看到我的布局原型。

我有两个：标题和容器。标题区域必须放在容器上方。标题有两个子元素：Logo DIV和Logo-Title DIV。他们的职位被评为家长[Header DIV]。所以，我将标题的位置设置为relative和children（Logo和Logo-Title）为绝对值。

但在此之后，Container没有放在标题区域下面！当我从Logo DIV和Logo-TITLE DIV中移除绝对位置时，容器就可以了！但我可以从父母（标题）对齐徽标和徽标标题。

为什么呢？容器不是Header的孩子！怎么解决它？

感谢。

Design Prototype

@charset "utf-8";

body{
    margin: 0 auto;
    width: 980px;
    background-color: #f1f1f1;
}

#header{
    position: relative;
    background-color: yellow;
    height: 154px;
}

#logo{
    position: absolute;
    background-color: green;
    width: 123px;
    height: 146px;
    margin-top: 4px;
    margin-left: 4px;
}

#logo-title {
    position: absolute;
    color: darkblue;
    font-size: 16pt;
    bottom: 0;
    margin-left: 60px;
}

#container {
    background-color: white;
    height: 600px;
    width: 980px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <div id="logo"/>
            <div id="logo-title">Logo-Title</div>
        </div>
        <div id="container"></div>
    </div>
</body>
</html>

Answer 1

logo上使用的单个标记关闭对div元素不起作用，所以我改变了这个

<div id="logo"></div>

将您的container添加到red临时，以便现在可以看到它呈现正确

@charset "utf-8";

body{
    margin: 0 auto;
    width: 980px;
    background-color: #f1f1f1;
}

#header{
    position: relative;
    background-color: yellow;
    height: 154px;
}

#logo{
    position: absolute;
    background-color: green;
    width: 123px;
    height: 146px;
    margin-top: 4px;
    margin-left: 4px;
}

#logo-title {
    position: absolute;
    color: darkblue;
    font-size: 16pt;
    bottom: 0;
    margin-left: 60px;
}

#container {
    background-color: red;
    height: 600px;
    width: 980px;
}

<div id="wrapper">
  <div id="header">
    <div id="logo"></div>
    <div id="logo-title">Logo-Title</div>
  </div>
  <div id="container"></div>
</div>

Answer 2

您的logo div语法不正确，关闭的div总是带有关闭div标签，例如<div id="logo"></div>

CSS位置：相对和绝对问题

2 个答案: