靈活的分度，固定的位置

我試着對一個靈活的DIV（居中，以最大寬度），以頭：

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

它的工作很好，但我靈活的div是不再「靈活」（它只是最大寬度尺寸）。我怎樣才能同時獲得靈活和粘性的div？

Fiddle

我要紅色的是調整大小，釘在頭

來源

2017-04-06 BlobDead

你可以給我們你的html和你的CSS？也是「靈活」你的意思是基於其內容的可變大小？ – philr

靈活性是什麼意思？請記住，當您修正某個位置時，它位於文檔的正常流程之外，因此它不會對其他元素做出反應。 –

我的意思是，當我調整窗口大小時（如果div的寬度大於最大寬度，那麼它將不會擴展），容器div會增長和縮小。 – BlobDead

您可以添加一個position: sticky; top: 0;，它會將粘性置於其父項的頂部。讓我們說你在哪裏把英雄放在標題下方，它將位於英雄的底部。

編輯：
，使這個瀏覽器兼容，你應該使用填充工具，有一對夫婦可以選擇，但這裏有兩個我所用。

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

來源

2017-04-06 14:58:32

這很好，但這不是一個與IE選項（ – BlobDead

@BlobDead更新與polyfill鏈接，我使用＃2在我目前的項目中 –

對我來說看起來不錯）謝謝） – BlobDead

保持它固定，保持它的最大寬度，然後只需添加width: 100%;

當你縮小屏幕它也將調整大小。

來源

2017-04-06 14:14:02 StefanBob

不，幫助）這是一個鏈接到[小提琴]（http://jsfiddle.net/shbcgac8/1）我想紅色的可調整大小和固定到標題 – BlobDead

看起來它對我有用。當屏幕尺寸減小時，它正在被正確調整大小，如果你想讓它「固定」在其他地方，然後重新定位它 – StefanBob

靈活的分度，固定的位置

回答

相關問題