div가 내 로그인 양식 앞에 있습니까?

Question

메뉴 막대로 사용하고있는 div 위에 로그인 양식을 가져 오려고하지만 div가 앞에 있고 로그인 양식을 차단하고 있습니다. 이것은 내가 지금 가지고있는 코드입니다, 사람이 #topbar 요소 후 #login-form 요소를 넣어, 이것이 당신의 HTML에서

#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

을? : 해결하는 방법을 알고 않습니다. 논리적으로는 그것이 있어야하는 곳입니다 (화면 판독기와 텍스트 전용 브라우저에 유용합니다)

또는 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; 
}