固定位置z-index不起作用

我試圖讓圖像覆蓋我的帖子，所以文字和圖像放在圖像後面。當我試圖讓它堆疊一切時，z-index不起作用。我不是編碼方面的專家，我老實說只是用tumblr做這個，但我似乎無法在任何地方找到答案。或者我能理解的一個，因爲我還是個初學者。任何幫助，將超級讚賞，這裏是代碼：固定位置z-index不起作用

#char { 
    position:fixed; 
    opacity: 1.0; 
    width: 1366px; 
    height: 768px; 
    TOP:0px; 
    LEFT:0px; 
    z-index: 4; 
}

來源

2015-12-03 robbie walker

你應該張貼HTML以及 – dippas

我添加了一個代碼片段，它包含只是一個div。 div重疊身體。如果你提供你的源代碼，我可以澄清。你也可以嘗試將z-index增加到99或999.我認爲你的代碼中有很多z index'd div。

<html> 
    <head> 
     <title></title> 
    </head> 
    <style type="text/css"> 
     #char { 
     position:fixed; 
     opacity: 1.0; 
     width: 1366px; 
     height: 768px; 
     TOP:0px; 
     LEFT:0px; 
     z-index: 4; 
     background-color: red; 
    } 
    body{ 
     background-color: #ccc; 
    } 
    </style> 
    <body> 
    <div id="char"> 
    </div> 
    </body> 
    </html>

來源

2015-12-03 16:27:04

您也可以嘗試添加圖像作爲背景圖像的元素，然後把你的文字在另一個元素是一個內。通過幾行對齊代碼，您可以將文本放在需要的位置。

<style> 
 
.divStyle { 
 
    background-image: url('http://38.media.tumblr.com/a10b40131efc719d0bff421226b9c52b/tumblr_inline_mq5b19gEvv1qz4rgp.jpg'); 
 
    background-size: cover; 
 
    height: 90vh; // put this to a 100 to cover the full height of the containing element (less here to avoid scroll bar) 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; //change center to 'flex-start' to move text to top or 'flex-end' to move it to the bottom 
 
} 
 

 
.myText { 
 
    width: 100%; 
 
    color: white; 
 
    font-size: 24px; 
 
    text-align: center; //can also be 'left' or 'right' 
 
} 
 
</style> 
 

 
<div class="divStyle"> 
 
    <div class="myText">Here is my text</div> 
 
</div>

來源

2015-12-03 22:25:06

固定位置z-index不起作用

回答

相關問題