CSS-子Div,在相对Div父级中具有固定位置-jQuery粘性头
我对元素的定位有问题。我的子div(#mainNav、.metaNav)的位置为:fixed,但这会导致它们忽略带有overflow:hidden(#container2)的父div容器。有没有办法在保持溢出的同时保持定位不变:对父div隐藏 CSS HTMLCSS-子Div,在相对Div父级中具有固定位置-jQuery粘性头,jquery,css,css-position,fixed,Jquery,Css,Css Position,Fixed,我对元素的定位有问题。我的子div(#mainNav、.metaNav)的位置为:fixed,但这会导致它们忽略带有overflow:hidden(#container2)的父div容器。有没有办法在保持溢出的同时保持定位不变:对父div隐藏 CSS HTML 回去 概述 搜寻 帮助 谢谢您的帮助。固定定位始终相对于视口,而不是最近的父元素。那么,您是想告诉我什么是我想要的,什么是做不到的? #container2 { height: 2400px; width: 980p
回去
概述
搜寻
帮助
谢谢您的帮助。固定定位始终相对于视口,而不是最近的父元素。那么,您是想告诉我什么是我想要的,什么是做不到的?
#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;
}
<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>