Question

我正在使用jQuery mobile开发一个Web应用程序，我需要在另一个（#number1）下放置div（<div class=ui-block-a>），但z-index属性不起作用！！

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

你能帮帮忙吗？

Answer 1

您只能对定位元素使用z-index

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

Working demo

Answer 2

对于你的#weightdata .ui-block-a，你需要添加小于10的z-index并将其他位置设置为静态，这样：的z-index：1;位置：相对; 会做的工作

使用z-index在另一个div下放置一个动画div

2 个答案: