我在定位元素时遇到问题。我有具有位置的子 div(#mainNav,.metaNav):固定,但这会导致他们忽略具有溢出的父 div 容器:隐藏(#container2)。有什么方法可以在保持溢出的同时保持定位不变:为父 div 隐藏?
http://jsfiddle.net/chapster82/kmszt/3/
CSS
#container2 {
height: 2400px;
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
overflow: hidden;
}
#dashboardNav {
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
background-color: #35478C;
border-right: 1px solid #171717;
position: relative;
left: 0;
bottom: 0;
width: 62px;
text-transform: uppercase;
z-index: 100;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 62.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
height: 100%;
}
#dashboardNav #mainNav {
-moz-transition: margin-top 0.4s cubic-bezier(0.2, 0.3, 0.05, 1);
-webkit-transition: margin-top 0.4s cubic-bezier(0.2, 0.3, 0.05, 1);
-o-transition: margin-top 0.4s cubic-bezier(0.2, 0.3, 0.05, 1);
-ms-transition: margin-top 0.4s cubic-bezier(0.2, 0.3, 0.05, 1);
transition: margin-top 0.4s cubic-bezier(0.2, 0.3, 0.05, 1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#dashboardNav .metaNav {
position: fixed;
bottom: 0;
}
HTML
<div id="container2">
<div id="dashboardNav">
<nav id="mainNav">
<a class="previous" data-view="previous">Go Back</a>
<a class="overview" data-view="overview">Overview</a>
<a class="social" data-view="social">Search</a>
</nav>
<nav class="metaNav">
<a class="help">Help</a>
</nav>
</div>
<div id="column1"></div>
</div>
谢谢你的帮助。