固定定位在相对父div中的div
固定定位在相对父div中的div
提问于 2011-10-21 15:16:26
我目前正在建设一个响应式的网站，需要一个菜单来修复，因此不滚动时，网站的其余部分滚动。问题是它是一个流畅的布局，我希望“固定位置”菜单项相对于包含的父元素而不是浏览器窗口进行修复。有没有办法做到这一点？
回答 8
Stack Overflow用户
发布于 2014-10-15 15:05:56
这个问题首先出现在谷歌上，虽然是一个旧的问题，所以我把我找到的工作答案贴了出来，这对其他人也有帮助。
这需要3个div，包括固定的div。
HTML
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>CSS
.wrapper { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }Stack Overflow用户
发布于 2011-10-23 06:25:15
加文
你遇到的问题是对定位的误解。如果你希望它相对于父对象是“固定的”，那么你真的希望你的#fixed是position:absolute，它会更新它相对于父对象的位置。
This question完整地描述了定位类型以及如何有效地使用它们。
总之，您的CSS应该是
#wrap{
position:relative;
}
#fixed{
position:absolute;
top:30px;
left:40px;
}Stack Overflow用户
发布于 2015-05-30 06:53:28
一个简单的解决方案不需要求助于JavaScript，也不会破坏CSS转换，简单地让一个与滚动元素大小相同的非滚动元素绝对定位在它上面。
基本的HTML结构为
CSS
<style>
.parent-to-position-by {
position: relative;
top: 40px; /* just to show it's relative positioned */
}
.scrolling-contents {
display: inline-block;
width: 100%;
height: 200px;
line-height: 20px;
white-space: nowrap;
background-color: #CCC;
overflow: scroll;
}
.fixed-elements {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.fixed {
position: absolute; /* effectively fixed */
top: 20px;
left: 20px;
background-color: #F00;
width: 200px;
height: 20px;
}
</style>HTML
<div class="parent-to-position-by">
<div class="fixed-elements">
<div class="fixed">
I am "fixed positioned"
</div>
</div>
<div class="scrolling-contents">
Lots of contents which may be scrolled.
</div>
</div>parent-to-position-by将是相对div来定位与contentsfixed-elements相关的固定内容div.- by将跨越此
div的大小，并包含其主div仅仅是一个绝对定位的div，跨越scrolling-contentsdiv顶部的相同空间绝对定位fixed类，它实现了与相对于父div固定定位相同的效果。(或滚动内容，因为它们跨越了整个空间)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7846161
复制相关文章
相似问题
腾讯云开发者
