html - 固定位置的灵活div

我正在尝试将灵活的DIV（居中，最大宽度）固定到标头：

position: fixed;
top: 49px;
left: 50%;
margin-left: -50px;

它工作正常，但是我的灵活div不再“灵活”（它只是最大宽度的大小）。如何同时获得一个灵活且粘滞的div？

Fiddle

我希望红色的可调整大小并固定到标题

最佳答案

您可以添加一个position: sticky; top: 0;，它将粘贴物放置在其父对象的顶部。假设您将英雄放置在标题下方，它将放置在英雄的底部。

编辑：
为了使该浏览器兼容，您应该使用polyfill，有两种选择，但我使用了两种。

1）Filamentgroups polyfill fixed-sticky
2）wilddeer polyfill stickyfill

http://jsfiddle.net/shbcgac8/4/

.sticky-card {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 960px;
    height: 150px;
    margin: 0 auto;
    background: red;
    box-shadow: 0 2px 4px rgba(0,0,0,0.24);
    margin-bottom: 24px;
}

关于html - 固定位置的灵活div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43257624/