z-索引和位置屬性間距

我相信這對於大多數新開發人員來說是一個非常混亂的問題。如果這個問題之前被問過，我很抱歉，但我很長一段時間找不到解決方案。z-索引和位置屬性間距

我想創建一個視頻封面背景，在它上面放置一些div，然後繼續製作div。

當我開始在視頻封面下工作時，事情變得有點複雜。 - 它們出現在其下面是可以的，但它們的樣式例如頁邊空白或放置
標籤會影響上面的視頻封面div，令人困惑。

這是我的代碼：

<html> 
<head> 
    <link href="style.css" rel="stylesheet"> 
</head> 

<body> 
    <div class="header"> 
    <div class="header-video" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro-video-poster.jpg?v=1.1.65') 50% bottom no-repeat;"> 
     <video preload="none" poster="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/empty.gif" autoplay loop> 
     <source src="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro.mp4?v=1.1.65" type="video/mp4"> 
     </video> 
    </div> 
    <div class="header-bg js-parallax" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/uploads/2016/04/intro-home.jpg') 50% 0 no-repeat;"> 
    </div> 
    </div> 
    <div style="z-index: 100;"> 
    <p> 
     some text here 
    </p> 
</body> 
</html>

preview pen

我願意把視頻覆蓋在坐的頂部。然後在視頻上添加一些內容。然後在視頻下繼續添加內容，而不會影響視頻及其上述內容的位置和風格。

任何幫助將被列出。謝謝！

編輯：在視頻下我的意思是下網頁..不是實際下視頻。

來源

2017-02-07 vadiki44

看看這個：http://codepen.io/TunderScripts/pen/mRjvPa。嘗試使用從0到高的z-index，因爲在瀏覽器中，負值不會根據邏輯來處理/堆棧。 –

謝謝你的回覆，我實際上已經嘗試過了。但在你的例子中，沒有視頻下的內容..當我的意思我下意味着下了頁面，而不是在視頻下。對不起 – vadiki44

你可以再檢查一次嗎？ http://codepen.io/TunderScripts/pen/mRjvPa –

不知道這是否是使其工作的專業方式。我不得不在視頻下創建另一個div。它也必須包含一些內容。

我添加了一個可見性設置爲隱藏的div。

然後我可以繼續在頁面的其餘部分工作。

我會對任何有關該主題和改進的進一步評論appriciate。

謝謝！

來源

2017-02-07 13:20:47 vadiki44

z-索引和位置屬性間距

回答

相關問題