Question

我在一个页面上有2个div的以下css。

.transaction{
    position: fixed;
    left: 31.5%;
    top: 34%;
}

.managed{
    position: fixed;
    left:17.5%;
    top:45%;
}

这用于定位div，每个div都有以下类和css

.teaser{
    float: right;
    color: #fff;
    background-color: #7b98ac;
    border: 2px solid #fff;
    padding: 12px 15px 12px 15px;
    -moz-opacity: 0.89;
    -khtml-opacity: 0.89;
    opacity: 0.89;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=89);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=89);
    filter: alpha(opacity=89);
    z-index: -10;
}

.actual {
    z-index: 9999;
    overflow: auto;
    word-wrap: normal;
    display: none;
    float: right;
    color: #fff;
    background-color: #e1261c;
    border: 2px solid #fff;
    padding: 12px 15px 12px 15px;
    -moz-opacity: 0.89;
    -khtml-opacity: 0.89;
    opacity: 0.89;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=89);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=89);
    filter: alpha(opacity=89);
}

我需要.actual div具有更高的z-index并浮动在.teaser之上（HTML BELOW）

<div class="transaction pop">
    <div class="shape"><img src="./images/shape.png" alt="multi media solutions" /></div>
    <div class="text" >
        <article class="teaser">
            <label >test</label>
        </article>

        <article class="actual">
            <label>test</label>
            <br><br>
            <p>test</p>
        </article>
    </div>
</div>

<div class="managed pop">
    <div class="shape"><img src="./images/shape.png" alt="multi media solutions" /></div>
    <div class="text" >
        <article class="teaser">
            <label >test</label>
        </article>

        <article class="actual">
            <label>test</label>
            <br><br>
            <p>test</p>
        </article>
    </div>
</div>

jQuery做其他所有事情 - 如果有帮助的话，我已将我的JS附加到下面

<script type="text/javascript">
    /*POP up text script*/
    $(document).ready(function() {
        $(".pop").mouseover(function() {
            var src = $(this).find(".shape img").attr("src","./images/shapehover.png");
            $(this).attr("src", src);

            $(this).find(".teaser").hide();
            $(this).find(".actual").css("margin-top", "-80%");             
            $(this).find(".actual").show();
        }).mouseout(function() { 
            var src = $(this).find(".shape img").attr("src","./images/shape.png");
            $(this).attr("src", src);
            $(this).find(".teaser").show();
            $(this).find(".actual").hide();
        });
    });
</script>

我的小提琴 - jsfiddle.net/Pheonix/tET94/3

Answer 1

您必须将position属性添加到其班级，并根据您的需要将其设置为absolute，relative或fixed，或者将其设置为{{1无效。

Z-index html问题

1 个答案: