在相对父 div 中固定定位的 div

标签 fixed css

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

最佳答案

这个问题在 Google 上排在第一位,虽然是一个老问题,所以我发布了我找到的有效答案,它可能对其他人有用。

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

关于在相对父 div 中固定定位的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7846161/

相关文章:

html - Modernizr 不会测试 w3schools 上列出的所有 css3 特性

css - 将绝对元素定位在彼此之下

css - 将弹出框设置为固定位置

javascript - 从固定定位的 float 元素计算 "left"和 "top"值

html - 使用 flex-direction : column results in huge gap in between the two flex children?

html - bgcolor 属性不适用于 Bootstrap

javascript - 修复了滚动停止在 div 上的侧边栏

C#处理固定宽度的文件

css - 在 CodeIgniter 中加载多个 css、图像和 js 文件

html - 使用不同列的不同规则控制 html 表格列宽