HTML/CSS는 Z- 인덱스와 기타의 맨 위에 DIV를 넣어

내 웹 사이트에 3 개 주요 층했습니다 : jsbin에서HTML/CSS는 Z- 인덱스와 기타의 맨 위에 DIV를 넣어

1) 내부 요소와 홈페이지보기 (#views) - BOTTOM LAYER
을 2) 오버레이 (흰색 배경 불투명도 jsbin에서 0.8 #overlay)와 - 중간 계층
3) 컨텍스트 메뉴 (jsbin에서 #contextmenu) - TOP 층

나는 상황에 맞는 메뉴를 표시 할 때 3 개의 레이어가 올바르게 표시됩니다 -> 기본보기는 tr에 의해 "숨김"입니다. 상위 오버레이이며 상황에 맞는 메뉴가 맨 위에 있습니다.

이제 내 문제는 기본보기에서 요소를 튀어 나오고 싶다는 것입니다. 컨텍스트 메뉴와 오버레이 사이에이 요소 (# card1 in jsbin)를 표시하고 싶습니다. 그러나 이것을 수행 할 수 없습니다. 가능한가? 당신의 도움에 대한 http://jsbin.com/gaxadaci/7/edit

감사 :

여기 내 jsbin입니다. 친절한 답변, 바스 티앙

출처

2014-04-16 PlaTyPuS

에 당신은 당신의 jsbin 편집 할 수 있습니까? – SW4

페이지로드가 아닌 사용자 상호 작용이 변경된 경우 자바 스크립트를 사용하지 않는 이유는 무엇입니까? – Bobby5193

왜 오버레이가 필요한지 알기가 어렵습니다. 이 예제를 사용하면 각 상자에 css'opacity'를 쉽게 넣을 수 있으며, 그 위에 마우스를 가져갈 때 각 불투명도를 개별적으로 변경할 수 있습니다. --- 내가 너무 많이 읽고있을 지 모르지만, 당신이 "뛰어 내리고 싶다"고 말하기 때문에,하지만 당신은 언제 또는 어떻게 말하지 않습니다. – Joonas

카드에 position:relative을 추가하십시오. z-index은 static 요소에는 적용되지 않습니다.

당신의 부모 "요소가 튀어하는"경우가 있음을 주목하는 것이 중요하다 자신의 z-index 정의,이 방법 은을 (작동하지 않고 "튀어 나오게 할 방법 가 없을 것 ") 부모가 그 자식에 대한 스태킹 컨텍스트를 정의하기 때문입니다.

출처

2014-04-16 09:28:37

고마워요! 정확히 내가 원했던 것. – PlaTyPuS

간단히 추가 "위치 : 상대"당신의 카드 사업부

#card1 { 
     z-index: 2; 
     position: relative; 
    }

JSbin http://jsbin.com/gaxadaci/13/

출처

2014-04-16 09:30:59 Dazvolt

HTML/CSS는 Z- 인덱스와 기타의 맨 위에 DIV를 넣어

답변

관련 문제