作者p134030772 (WaitForU)
看板Web_Design
标题[问题] position:absolute元素的显示
时间Thu Jun 16 22:23:57 2016
最近在学设计网页时时，遇到CSS position的问题
以下程式是我参考写出来的一个header
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<link rel="stylesheet" href="./css/normalize.css">
<style>
html { font-family: "Ropa Sans", sans-serif; font-size: 16px; line-height: 1.5
; }
body { background-color: rgb(240, 240, 240); color: rgb(0, 0, 0); min-width: 9
60px; padding-top: 240px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding-left: 0; }
ul li { list-style-type: none; }
a { color: inherit; text-decoration: none; }
/*
* header
*/
.page-header {
background-color: rgb(255, 255, 255);
position: absolute;
width: 100%;
min-width: 960px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.page-header > .inner {
margin: auto;
width: 960px;
}
.no-boxshadow .page-header {
border-bottom: 1px solid rgb(204, 204, 204);
}
/* Primary nav */
.primary-nav {
float: right;
line-height: 65px;
letter-spacing: 1px;
text-transform: uppercase;
}
.primary-nav li {
float: left;
}
.primary-nav a {
display: block;
padding: 0 2em;
}
.primary-nav a:hover {
background-color: rgb(240, 240, 240);
}
</style>
</head>
<body>
<header class="page-header" role="banner">
<div class="inner">
<nav class="primary-nav" role="navigation">
<ul>
<li><a href="./">About</a></li>
<li><a href="./">Work</a></li>
<li><a href="./">Blog</a></li>
<li><a href="./">Recruit</a></li>
<li><a href="./">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
请问各位大大们
为什麽每次当我把.page-header的position:absolute拿掉时，在网页上就看不到.page-h
eader背景的白色？
为什麽一定要加回去才会显示？
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 27.245.15.143
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1466087039.A.6A8.html
1F：推 ian90911: 你的normalize.css里面是什麽? 06/17 09:26
2F：→ ccvs: 通常元素重叠都会用absolute 你拿掉的话元素就不知道被挤到 06/17 15:24
3F：→ ccvs: 哪 可以用开发者工具看元素跑去哪了 06/17 15:24
4F：→ p134030772: Normalize.css没有影响到 06/17 17:46
5F：→ p134030772: 回ccvs : 没加的话，整个元素高度变成0 06/17 17:47
6F：→ xdraculax: float 就是这样，没有为什麽 @@ 要嘛大家一起飘，要嘛 06/18 09:18
7F：→ xdraculax: 在最後插入一个元素加入 clear:both 也可以 06/18 09:18