Question

大家好我在CSS中有点菜鸟，刚刚开始设计一个网站。我正在尝试将标识div放在我的标题div上，背景颜色为蓝色。一切都很好但是当我设置子div（logo div）的位置时，蓝色消失。

的style.css

@CHARSET "ISO-8859-1";

#header {
    background-color: blue;
    position: relative;
}

#logo {
    position: absolute;
}

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Insert title here</title>
</head>
<body>
<div id="header" >
    <div id="logo">
        <img src="images/logo.jpg">
    </div>
</div>
</body>
</html>

Answer 1

当您将图片位置更改为absolute时，它跳出标题，然后您的div区域变为零。所以现在你需要为它设置一个大小。

body{
  width:100%;
  height:100%;
  margin: 0px;
}

#header {
  background:skyblue;
  position: relative;
  width:100%;
  height:190px;
  text-align:center;
}

#logo {
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Insert title here</title>
</head>
<body>
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/Goy7oBy.gif" style="max-height:190px">
</div>
<h2 style="font-family:arial,sans-serif;color:white;line-height:190px;margin:0px">TITLE</h2>
</div>
</body>
</html>

Answer 2

您需要设置标题的高度。这是因为绝对div有点＆＃34;外面＆＃34;标题因此标题的高度变为0。

Answer 3

问题是你没有提到标题div的任何高度，当我通过删除徽标div尝试你的代码时，我还没有看到任何蓝色，然后我意识到没有提到高度。

Prelude> :load "ExhaustivePattern2.hs"
[1 of 1] Compiling ExhaustivePattern2 ( ExhaustivePattern2.hs, interpreted )

ExhaustivePattern2.hs:6:1: Warning:
    Pattern match(es) are non-exhaustive
    In an equation for ‘heathrow’:
        Patterns not matched:
            [_]
            [_, _]

Answer 4

设置#header

的宽度和高度

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"><title>Insert title here</title>
<style type = "text/css">
#header {
background-color: blue;
position: relative;
width: 400px;
height: 500px;
}

#logo {
text-align: center;
}
</style>
</head>
<body>
<div id="header" >
    <div id="logo">
        <img src="me.png">
    </div>
</div>
</body>
</html>

CSS：绝对位置和相对位置

4 个答案: