CSS z-index属性中的循环问题

时间：2015-04-10 07:19:33

标签： html css

3个内容的z-index（dropholder，drop_menu＆amp; tip）未在此页面中调整。
如果我没有将z-index属性包含到dropholder .w_e_plan_a_drop_con 

.w_e_plan_a_drop_con /* Line No 64 on jsfiddle */
{
    position:absolute;
    margin-left:6px;
}

这是输出：

enter image description here

如果我将z-index包含到.w_e_plan_a_drop_con，则下一个下拉菜单会受到影响。

.w_e_plan_a_drop_con /* line # 64 in jsfiddle */
{
    position:absolute;
    margin-left:6px;
    z-index:5; /* line # 68 in jsfiddle */
}

这是输出：
enter image description here

这是我的三个要求： 1. dropholder（head）应该被赋予最高的z-index优先级

.w_e_model_drop_con, .w_e_plan_b_drop_con /*line # 58 in jsfiddle*/
{
    position:absolute;
    margin-left:6px;
}
.w_e_plan_a_drop_con /*line # 64 in jsfiddle*/
{
    position:absolute;
    margin-left:6px;
    z-index:5;
}
.model_dropholder, .plans_dropholder /*line # 70 in jsfiddle*/
{
    position:absolute;
    ... 
    z-index:200;
}

  1. 提示应该给予中等z-index优先级

    /**/#model_desc, #plan_a_desc, #plan_b_desc /* Line No 166 on jsfiddle { position:relative; ... z-index:900; }

  2. drop_menu应该被赋予最低的z-index优先级

    .model_menu, .plans_menu /* Line No 101 on jsfiddle */ { position:relative; ... z-index:900; }

    3. 这是我FIDDLE 我还提到了方便的jsfiddle的行号。
    提前谢谢你给你的黄金时间。

2 个答案:

答案 0 :(得分：2)

从z-index:200和.model_dropholder, .plans_dropholder

中删除#model_drop_head, #plans_drop_head

演示 - https://jsfiddle.net/21tohdn2/11/

答案 1 :(得分：1)

它可以帮助你： - 

var model_desc = "a<br />b";
var model_attack = "c<br />d";
var model_retired = "e<br />f";
var model_seige = "g<br />h";
var model_ambush = "i<br />j";
var model_bl = "k<br />l";
var model_conf = "m<br />n";
var model_defind = "o<br />p";

//Hiding comments boxes on load
$("#model_desc, #plan_a_desc, #plan_b_desc").hide();
//Dropdown Model
$(".w_e_model_drop_con").hover(

function () {
    show_troops('model_menu_1')
},

function () {
    hide_troops('model_menu_1');
});
//Dropdown Plan-A
$(".w_e_plan_a_drop_con").hover(

function () {
    show_troops('plan_a_menu')
},

function () {
    hide_troops('plan_a_menu');
});
//Dropdown Plan-B
$(".w_e_plan_b_drop_con").hover(

function () {
    show_troops('plan_b_menu')
},

function () {
    hide_troops('plan_b_menu');
});
//Tooltip for Model
$("#w_e_model").hover(

function () {
    show_it("model_desc");
},

function () {
    hide_it("model_desc");
});
//Tooltip for Plan-A
$("#w_e_plan_a").hover(

function () {
    show_it("plan_a_desc");
},

function () {
    hide_it("plan_a_desc");
});
//Tooltip for Plan-B
$("#w_e_plan_b").hover(

function () {
    show_it("plan_b_desc");
},

function () {
    hide_it("plan_b_desc");
});

function show_troops(id) {
    $("#" + id).addClass("showMenu");
}

function hide_troops(id) {
    $("#" + id).removeClass("showMenu");
}

function update_model_desc_text(model_type) {
    var cur_model = eval(model_type); //Converting String to Varible
    $("#model_desc_inner").html(cur_model);
}

function show_it(id) {
    $("#" + id).show();
}

function hide_it(id) {
    $("#" + id).hide();
}
.w_e_table {
    width:90%;
    margin-left:5%;
    margin-right:5%;
    margin-top:5px;
}
.w_e_model_and_plan {
    margin-top:5px;
    margin-bottom:5px;
    padding-left:7px;
    padding-right:7px;
    padding-top:5px;
    padding-bottom:5px;
    border:solid 1px #00FF00;
    font-size:14px;
    font-weight:normal;
}
.ui-corner-all {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.w_e_ins {
    float:right;
    font-size:12px;
    color:#FF0066;
}
.w_e_plan {
    margin-top:5px;
    margin-bottom:1px;
    padding:5px;
    background-color:rgba(0, 255, 0, 0.25);
    font-size:14px;
    font-weight:normal;
}
#w_e_plan_b {
    margin-left:25%;
}
.war_room_display_area {
    padding:7px;
    background-color:rgba(255, 0, 0, 0.15);
    border:solid 1px #999999;
    font-size:14px;
    font-weight:normal;
    height:120px;
    -webkit-box-shadow: 2px 2px 4px #999999;
    -moz-box-shadow: 2px 2px 4px #999999;
    box-shadow: 2px 2px 4px #999999;
}
/*---------- War Engagement Dropbars Start -----------*/
 .w_e_model_drop_con, .w_e_plan_b_drop_con {
    position:absolute;
    margin-left:6px;
}
.w_e_plan_a_drop_con {
    position:absolute;
    margin-left:6px;
    z-index:5;
}
.model_dropholder, .plans_dropholder {
    position:absolute;
    width:94px;
    height:18px;
    padding:1px;
    text-align:center;
    border-radius:3px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#fff;
    cursor:pointer;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    border:1px solid #9b0db9;
    background:-webkit-linear-gradient(#da4df8, #9b0db9);
    background:-moz-linear-gradient(#da4df8, #9b0db9);
    background:-ms-linear-gradient(#da4df8, #583dc0);
    background:-o-linear-gradient(#da4df8, #583dc0);
    background:linear-gradient(#da4df8, #9b0db9);
}
#model_drop_head, #plans_drop_head {
    position:relative;
}
.model_menu, .plans_menu {
    position:relative;
    margin-top:1px;
    margin-left:-2px;
    width:52px;
    cursor:pointer;
    opacity:0;
    font:12px arial;
    text-align:left;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform:rotatey(180deg) rotateX(5deg) translatey(100px);
    -moz-transform:rotatey(180deg) rotateX(5deg) translatey(100px);
    -ms-transform:rotatey(180deg) rotateX(5deg) translatey(100px);
    -o-transform:rotatey(180deg) rotateX(5deg) translatey(100px);
    transform:rotatey(180deg) rotateX(5deg) translatey(100px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    background:-webkit-linear-gradient(#4dc2f8, #0d82b9);
    background:-moz-linear-gradient(#4dc2f8, #0d82b9);
    background:-ms-linear-gradient(#4dc2f8, #0d82b9);
    background:-o-linear-gradient(#4dc2f8, #0d82b9);
    background:linear-gradient(#4dc2f8, #0d82b9);
    border:1px solid #0d82b9;
    border-radius:3px;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
    overflow:hidden;
    z-index:900;
}
.model_items, .plans_items {
    padding-bottom: 1px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 1px;
    margin-left:-35px;
    border-bottom:1px dotted #fff;
    color:#FFFF00;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.model_items:hover, .plans_items:hover {
    background:#61ccfd;
    padding-left:5px;
    color:#000000;
}
.model_menu li:last-child, .plans_menu li:last-child {
    border:none;
}
#model_desc, #plan_a_desc, #plan_b_desc {
    position:relative;
    margin-top:-18px;
    margin-left:110px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    color:#FF00FF;
    z-index:900;
}
.left {
    padding-bottom: 40px;
    min-height: auto !important;
    padding-right: 0;
    float: left;
    background:#FFFFCC;
    border-color:#FFFFCC;
    border-style:solid;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}
.tip {
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: relative;
    width: 200px;
    background:#FFFFCC;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}
.tip:before {
    position: absolute;
    top: -14px;
    left: 98px;
    display: inline-block;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #FFFFCC;
    border-left: 14px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content:'';
}
.tip:after {
    position: absolute;
    top: -12px;
    left: 99px;
    display: inline-block;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #FFFFCC;
    border-left: 12px solid transparent;
    content:'';
}
.tip.left:before {
    border-top: 14px solid transparent;
    border-right: 14px solid #FFFFCC;
    border-bottom: 14px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.2);
    left: -28px;
    top: 12px;
}
.tip.left:after {
    border-top: 12px solid transparent;
    border-right: 12px solid #FFFFCC;
    border-bottom: 12px solid transparent;
    left: -24px;
    top: 14px;
}
.showMenu {
    opacity:1;
    -webkit-transform:rotateX(0deg) translatey(0px);
    -moz-transform:rotateX(0deg) translatey(0px);
    -ms-transform:rotateX(0deg) translatey(0px);
    -o-transform:rotateX(0deg) translatey(0px);
    transform:rotateX(0deg) translatey(0px);
}
/*----------- War Engagement Dropbars End --------------*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="0" cellspacing="0" class="w_e_table" align="center">
    <tr>
        <td colspan="2">
            <div class="w_e_model_and_plan ui-corner-all">
                <div id="w_e_model">Your War Engagement Model : <span class="w_e_model_drop_con"><span class="model_dropholder"><span id="model_drop_head" onmouseover="update_model_desc_text('model_desc');">Attack</span>

                    <ul class="model_menu" id="model_menu_1">
                        <li class="model_items">Attack</li>
                        <li class="model_items">Retired</li>
                        <li class="model_items">Seige</li>
                        <li class="model_items">Ambush</li>
                        <li class="model_items">Behind Line</li>
                        <li class="model_items">Confrontation</li>
                        <li class="model_items">Defind</li>
                    </ul>
                    </span>
                    <div id="model_desc">
                        <div class="tip left ui-corner-all" id="model_desc_inner"><span class="w_e_tooltip_hilight1">Model:</span>

                            <br />Model is main strategy of your war.</div>
                    </div>
                    </span> <span class="w_e_ins">(Over the Mouse to see detail)</span>

                </div>
                <div class="w_e_plan ui-corner-all"><span id="w_e_plan_a">Select W-E Plan-A : 
                    
                    <span class="w_e_plan_a_drop_con"><span class="plans_dropholder"><span id="plans_drop_head" onmouseover="update_plan_a_desc_text('plan_a_desc');">One Line</span>

                    <ul class="plans_menu" id="plan_a_menu">
                        <li class="plans_items">a</li>
                        <li class="plans_items">b</li>
                        <li class="plans_items">c</li>
                        <li class="plans_items">d</li>
                        <li class="plans_items">e</li>
                        <li class="plans_items">f</li>
                        <li class="plans_items">g</li>
                    </ul>
                    </span>
                    <div id="plan_a_desc">
                        <div class="tip left ui-corner-all" id="plan_a_desc_inner"><span class="w_e_tooltip_hilight1">Plan-A: </span>This plan is troops alignment order and structure.</div>
                    </div>
                    </span>
                    </span><span id='w_e_plan_b'>Select W-E Plan-B : 
                    
                    <span class='w_e_plan_b_drop_con'><span class='plans_dropholder'><span id='plans_drop_head' onmouseover='update_plan_b_desc_text(\"plan_b_desc\");'>Keep Ground</span>

                    <ul class="plans_menu" id="plan_b_menu">
                        <li class="plans_items">a</li>
                        <li class="plans_items">b</li>
                        <li class="plans_items">c</li>
                        <li class="plans_items">d</li>
                        <li class="plans_items">e Line</li>
                        <li class="plans_items">f</li>
                        <li class="plans_items">g</li>
                    </ul>
                    </span>
                    <div id='plan_b_desc'>
                        <div class='tip left ui-corner-all' id='plan_a_desc_inner'><span class='w_e_tooltip_hilight1'>Plan-A: </span>This plan manages troops alignment order and structure.</div>
                    </div>
                    </span>
                    </span>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan='2'>
            <div class='war_room_display_area ui-corner-all' align='center'>War Engagement Display Area</div>
        </td>
    </tr>
</table>

相关问题
最新问题