修复了相对父div中定位的div

Question

我目前正在构建一个响应式网站,需要修复一个菜单,因此当网站的其余部分滚动时不会滚动.问题是它是一个流畅的布局,我希望"固定位置"菜单项相对于包含父元素而不是浏览器窗口是固定的.无论如何这可以做到吗？

Answer 1

这个问题首先出现在谷歌上,虽然是一个旧问题所以我发布了我找到的工作答案,这对其他人有用.

这需要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; }

Answer 2

加文,

你遇到的问题是对定位的误解.如果你希望它是"固定"相对于父,那么你真的想你#fixed是position:absolute其中相对于父其位置将更新.

这个问题充分描述了定位类型以及如何有效地使用它们.

总之,你的CSS应该是

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}

Answer 3

一个简单的解决方案,不涉及诉诸JavaScript并且不会破坏CSS变换,只需要一个非滚动元素,与滚动元素大小相同,绝对定位在它上面.

基本的HTML结构将是

<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>

• parent-to-position-by将是相div对于某个固定的位置的相对.
• scrolling-contents将跨越这个大小div并包含其主要内容
• fixed-elements只是一个绝对定位div跨越同一空间的顶部scrolling-contents div.
• 通过div对fixed类进行绝对定位,它实现了与相对于父类固定定位相同的效果div.(或滚动的内容,因为它们跨越整个空间)

这里有一个js-fiddle和一个工作示例

Answer 4

在父元素上尝试 postion:sticky。

Answer 5

<div>如果您使用边距而不是头寸来移动固定值，则这是可能的：

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{ 
   position:fixed;
   width:10px;
   height:10px;
   background-color:#333;
   margin-left:200px;
   margin-top:200px;
}

还有这个 HTML：

<div id="wrap">
   <div id="fixed"></div>
</div>

玩一下这个jsfiddle。