具有固定位置的灵活div

Question

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

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

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

Fiddle

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

Answer 1

保持固定，保持最大宽度，然后只需添加width: 100%;

当您缩小屏幕尺寸时，它也会调整大小。

Answer 2

您可以添加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; 
}