固定位置挠性除尘器

Question

​

​

我试图将一个灵活的DIV (居中，最大宽度)固定在一个标题上：

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

它工作很好，但我的柔性div不再是“灵活的”(它只是最大宽度的大小)。我怎样才能同时得到一个灵活的和粘性的div？

小提琴

我希望红色的那个可以调整大小，并钉在头上。

Answer 1

您可以添加一个position: sticky; top: 0;，它会将粘性放在它的父节点的顶部。让你说你把英雄放在标题下面的地方，它会定位在英雄的底部。

编辑：

要使这个浏览器兼容，你应该使用一个多填充，有一对夫妇可以选择，但这里有两个我用过。

1) 聚酰亚胺固定粘胶

2) 野鹿填充胶

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

Answer 2

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

当您缩小屏幕大小时，它也会缩小大小。