我试图将透明导航框向下移动到容器的底部，但是每次我在#navigation中添加margin-top时，它都会将整个容器向下移动。
这是HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About Me</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li class="buttons">About</li>
<li class="buttons">Experience</li>
<li class="buttons">Websites</li>
<li class="buttons">School</li>
<li class="buttons">Future</li>
</ul>
</div><!--end of navigation-->
</div><!--end of container-->
</body>
</html>
这是CSS
@charset "utf-8";
/* CSS Document */
body {
background: #5D5D5D;
}
#container {
width:1200px;
height:800px;
position:relative;
margin:auto;
background-color:#B5B5B5;
border-radius:200px;
}
#navigation ul li {
list-style-type:none;
display:inline-table;
}
.buttons {
width:100px;
height:100px;
background: #D1D1D1;
border-radius:200px;
-webkit-border-radius:200px;
line-height:100px;
text-align:center;
margin-right:10px;
box-shadow:0 3px 3px 3px rgba(0,0,0,0.15);
margin-top:7px;
transition:all 0.3s;
-webkit-transition:all 0.3s;
border: 3px solid #D1D1D1;
}
.buttons:hover {
background: #DFDFDF;
cursor:pointer;
border: 3px dotted #515151;
}
#navigation {
background: rgba(0,0,0,0.15);
width:700px;
height:120px;
border-radius:50px;
text-align:center;
}
JSFIDDLE链接：http://jsfiddle.net/RX94a/
最佳答案
页顶距将影响元素和网页顶部之间的整体间距。
但是通过定位，您可以将元素精确定位到想要的位置。我不确定这是否是您在说的。
#navigation{
position:absolute;
bottom:20px;
}
结果如下：jsFiddle