100％的固定位置覆蓋屏幕

我建立一個網站，有一個視頻的自動播放作爲英雄元素，我目前擁有的視頻設置爲以下CSS：100％的固定位置覆蓋屏幕

#video-background { 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto !important; 
    height: auto !important; 
    z-index: -100; 
}

其目的是爲了允許它是全寬。固定位置是必需的，因爲視頻下方的內容需要能夠滾動視頻。

不幸的是，即使是負Z指數，視頻也會阻止您點擊頁面下方的內容。它仍然覆蓋了一切。當我在任何地方點擊右鍵，暫停，取消靜音等等控制。

不知道如何防止這種情況發生。我試着玩弄一些設置，但是任何事情（至少我已經嘗試過），這使得它的全部結束，導致它覆蓋一切。

這裏的HTML：

<video autoplay="" loop="" id="video-background" muted="" style="width: 100%; height: 100%;"> 
    <source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4"> 
</video>

編輯：與同事一點點幫助解決它。這裏的CSS：

div#layer_slider_1 { 
    height: auto; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
} 

div#after_layer_slider_1 { 
    margin-top: 800px; 
}

div＃layer_slider_1是父div。 div＃after_layer_slider_1顯然是它後面的div。

感謝您的意見。

來源

2015-12-02 cookavich

使用此CSS：'html，body {width：100％; 「 –

請注意，如果您決定使用自動播放功能，則最好在默認情況下將其靜音，並在移動設備上最初停用視頻。前者是因爲沒有人喜歡音頻如果你沒有要求它彈出。後者是因爲那些用戶想要節省帶寬。另外，你在這裏做出一些奇怪的決定。將w和h設置爲100％內聯，然後用auto覆蓋CSS，然後將最小值設置爲100％？最後，我們需要看到其他代碼。因爲即使先前的筆記有效，它仍然應該起作用。當且僅當其他元素也相對定位時。 –

在Wordpress中開發，這就是爲什麼有內聯樣式。無法幫助。 – cookavich

與同事一點點幫助解決它。這裏的CSS：

div#layer_slider_1 { 
    height: auto; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
} 

div#after_layer_slider_1 { 
    margin-top: 800px; 
}

div＃layer_slider_1是父div。 div＃after_layer_slider_1顯然是它後面的div。爲了避免它覆蓋整個頁面，即使使用z-index，也需要使它下面的div覆蓋視頻。

感謝您的意見。

來源

2015-12-02 16:22:33 cookavich

添加這個CSS屬性

html, body { 
    width:100%; 
    height:100%; 
}

來源

2015-12-02 13:52:30 RAP

100％的固定位置覆蓋屏幕

回答

相關問題