z-index不能使用絕對位置

如果您看看我的測試網站here，您將看到「向下滾動」按鈕重疊了我的所有內容，而不管我輸入的是什麼z-index。有沒有辦法解決這個問題？我意識到我的立場是absolute，這很可能是問題所在，但是如果我將其聲明爲relative，它不會再設置在我的頁面底部。z-index不能使用絕對位置

#scroll-down { 
 
    height: 53px; 
 
    width: 100%; 
 
    display: table-cell; 
 
    position: absolute; 
 
    color: #fff; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: inherit; 
 
    vertical-align: middle; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    cursor: pointer; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
#scroll-down:hover { 
 
    color: #bae9ff; 
 
    background-color: #fff; 
 
}

<div class="site-wrap"> 
 

 
    <div class="background-image img-home"> 
 

 
    <div class="text">Welcome!</div> 
 

 
    <a id="scroll-down noselect"> 
 
     <div id="scroll-down">Scroll Down 
 
     <br /> 
 
     <object class="scroll-down-img" height="33" width="50"></object> 
 
     </div> 
 
    </a> 
 

 
    </div>

來源

2016-09-22 Jesse

你想要隱藏滾動的向下滾動div嗎？ –

嗯，我只是喜歡它滑到主菜單/標誌欄（位置：固定） – Jesse

有一件事情將z-index：999添加到這些類.menu-center和.bar-bg-center。它會解決你的問題。 –

如果你想要把你的滾動DIV標題下則使用的z-index：999 .top-bar類，所以頂部條會出現在滾動條文本的上方，並且你完成了。

.top-bar { 
z-index:999; 
}

來源

2016-09-22 07:19:14

z-index只對具有屬性position與值absolute或fixed或relative元件有效。 position: static（這是所有元素的默認值）的元素不會受到z-index的影響。

你的情況

最簡單的方式，加入到position: relative .header，讓你的頭標記變成這樣：

.header { 
    width: 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1000; 
    position: relative;/* this will fix it */ 
}

來源

2016-09-22 07:16:36 evilReiko

我更喜歡你的解決方案，然後我.. :) –

我也試過，它的工作也很完美！ – Jesse

-1

您遇到的問題是「Object」標記。像OBJECT，EMBED，FRAME這樣的標籤（以及某些以前的瀏覽器版本中的SELECT）被渲染爲窗口模型的一部分，並且不考慮z索引。經典的做法是將頂級內容放在iframe中。在你的情況下，我不明白爲什麼你需要Object標籤的簡單按鈕。只需改變它與圖像。

來源

2016-09-22 07:19:47

z-index不能使用絕對位置

回答

相關問題