Question

当我点击Class Section（div）时，我需要将截面细节显示为幻灯片切换。它按预期工作正常，但是当我单击该部分时，它向下滑动但另一个组件是错误对齐的（年龄范围组件向左侧移动），所以我想在组件顶部显示幻灯片切换。我使用z-index并没有解决我的问题。

请参考JsFiddle：http://jsfiddle.net/LccuM/

我的代码：

<div>
    <div style="width:550px;">
        <br>  
        <label>Name</label>
        <input type="text" name="name" value="" style="width: 208px;" /> 
        <button type="button">send</button>  
        <br><br><br><br>
    </div>

    <div style="float: right; margin-top:-95px; width: 100px; " class="stdSection" >
        <a>Class Section</a> 
        <fieldset class="section" style="display:none; float:right; width:200px;">
            <input type="checkbox" name="sec" value="1" />1<br />
            <input type="checkbox" name="sec" value="2" />2<br />
            <input type="checkbox" name="sec" value="3" />3<br />
            <input type="checkbox" name="sec" value="4" />4 <br />
            <input type="checkbox" name="sec" value="5" />5<br />
        </fieldset>
    </div>

    <div style="float: right; margin-top:-39px; padding-right: 25px; ">
        <span>Age : 5</span>
        <input type="range" name="points" min="5" max="18">
        <span>18</span>
    </div>
</div>

Jquery：

$(document).ready(function() {
    $('div.stdSection').click(function() { 
        $(this).find('.section').slideToggle('slow');
    });
});

当我查看我的幻灯片切换时，我不希望移动年龄范围组件。

Answer 1

Z-index不是问题。您需要在该组件like this

上重叠div

background:#FFF;
display: block;
position: absolute;
right: 15px;
width: 200px;

为您的字段集设置此css。

Answer 2

使用以下css使其正确定位

**CSS**
.section {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    float: right;
    position: absolute;
    right: 0;
    width: 200px;
    z-index: 1000;
}
.slider {z-index:1;}

Demo Fiddle

HTML组件移动将使用slideToggle

2 个答案: