div在我的登錄表單前面？

Question

我試圖讓我的登錄表單位於我用作菜單欄的div的頂部，但div在前面，它阻止了登錄表單。這是我現在所擁有的代碼，沒有人知道如何解決這個問題？：

#login-form { 
    top: 0; 
    position: absolute; 
} 

#topbar { 
    height: 40px; 
    width: 100%; 
    background-color: #336680; 
    box-shadow: 0.1em 0.1em 0.1em; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 0; 
} 

Answer 1

在你的HTML，把#login-form元素#topbar元素之後。從邏輯上講，這就是它應該在哪裏（這對屏幕閱讀器和純文本瀏覽器很有用）

或者，在你的CSS中使用z-index - 數量越大越好。

Answer 2

一個很好的解決方案是在你的CSS中使用#topbar和#login-form上的z-index。具有較高z-index的元素將顯示在較低元素的頂部。這應該工作：

#login-form { 
    z-index: 2; 
    top: 0; 
    position: absolute; 
} 

#topbar { 
    z-index: 1; 
    height: 40px; 
    width: 100%; 
    background-color: #336680; 
    box-shadow: 0.1em 0.1em 0.1em; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 0; 
}