CSS: absolute position and relative position
Question
Hi guys I am a bit noob in CSS and just started designing a website. What's happening is i am trying to put a logo div on my header div with background color blue. Everything is just fine but when i set the position of child div (logo div) the blue color disappear.
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>
4 answers
solution1
4 ACCPTED 2016-02-21 09:25:30
When you changed the pic position to absolute it jumped out of the header, then your div area became equal to zero. So now you need to set a size for it.
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>
solution2
1 2016-02-21 09:20:01
You need to set height of your header. This is because absolute div is kind of "outside" of the header therefor header's height is became 0.
solution3
0 2016-02-21 09:29:50
问题是您没有提到标题div的任何高度，当我通过删除徽标div尝试代码时，我也没有看到任何蓝色，然后我意识到没有提及该高度。
height: Xpx;/* This works */
solution4
0 2016-02-21 09:43:37
Set the width and height of the #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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.