z- 인덱스가있는 다른 div 아래에 애니메이션 div를 배치하십시오.

jQuery 모바일을 사용하여 웹 응용 프로그램을 개발 중이므로 div (#number1)를 다른 (<div class=ui-block-a>) 아래에 넣어야하지만 z-index 속성이 작동하지 않습니다!z- 인덱스가있는 다른 div 아래에 애니메이션 div를 배치하십시오.

JSFiddle

HTML :이

<div id="welcome-page" data-role="page">  
    <div id="content" data-role="content"> 
     <div id="userdata"> 
      <div id="weightdata" class=ui-grid-b> 
       <div id="number1" >1 
       </div> 
       <div class=ui-block-a> 
        Enter your <span>thing</span>: 
       </div> 
       <div class=ui-block-b></div> 
      </div> 
     </div> 
    </div> 
</div>

CSS : 당신이

#userdata { 
    color: #FFFFFF; 
    text-shadow: none; 
    border-radius:5px; 
    overflow:hidden; 
    position:absolute; 
    right:7px; 
    top:3%; 
    left:7px; 
} 
#weightdata { 
    color: #000000 !important; 
    background-color: #06b4c8; /*blue*/ 
    padding-left: 10px; 
} 
#weightdata .ui-block-a { 
    -webkit-transition: all 1.0s ease-in-out; 
    -moz-transition: all 1.0s ease-in-out; 
    -o-transition: all 1.0s ease-in-out; 
    -ms-transition: all 1.0s ease-in-out; 
    transition: all 1.0s ease-in-out;  
    text-shadow:0px 0px 0px #444; 
    color:black; 
    z-index:20 !important; 
} 
#weightdata .ui-block-a.active { 
    text-shadow:0px 0px 40px #444; 
    color:white; 
    z-index:20 !important; 
} 
#weightdata #number1 { 
    -webkit-transition: opacity 1.0s ease-in-out; 
    -moz-transition: opacity 1.0s ease-in-out; 
    -o-transition: opacity 1.0s ease-in-out; 
    -ms-transition: opacity 1.0s ease-in-out; 
    transition: opacity 1.0s ease-in-out; 
    position: absolute; 
    top: 0; 
    left: 7%; 
    color: white; 
    z-index: 10 !important; 
    font-size: 50px; 
    font-weight: bold; 
    display:block; 
    opacity: 0; 
} 
#weightdata #number1.active { 
    opacity: 1; 
    display:block; 
    z-index: 10 !important; 
} 
#weightdata .ui-block-a { width: 35% !important; margin-top: 13px;}

제발 도와 드릴까요? 당신의 #weightdata의 당신은 위치 요소에 z-index을 사용할 수 있습니다

출처

2014-03-26 Louis

표시 CSS는 – Justinas

입니다. 너무 길기 때문에 미안 해요! – Louis

@Louis 너무 길지 않아서 방금 추가 했으므로 멋지게 보입니다. –

#weightdata .ui-block-a 
    position: relative; 
    z-index:20; 
}

Working demo

출처

2014-03-26 13:08:01 Turnip

빙고! 고맙습니다 – Louis

.ui-블록은-A, 당신은 10 다른 위치보다 Z- 인덱스를 추가해야 정적 그래서 : z- 색인 : 1; 위치 : 상대적; 은 작업을 수행 할 것입니다

출처

2014-03-26 13:16:00 robjez

z- 인덱스가있는 다른 div 아래에 애니메이션 div를 배치하십시오.

답변

관련 문제