Question

当我点击名为＆＃34; test＆＃34;的div时，一个名为＆＃34; div＆＃34;的div来了，还有更高的z-index，一个名为＆＃34; div＆＃34;。

的div

我的问题是当我将位置设置为绝对值时，＆＃34;内部＆＃34;我无法获得利润率底部。当我将位置设置为相对时，它会将我的div＆＃34; test＆＃34;低于它。

理解这可能有点困难，但问题非常简单。这里有一个小提琴：http://jsfiddle.net/malamine_kebe/QRpqs/

我的css是：

#insideAbsolute{
    background-color:#f8f8f8;
    position: absolute;
    top:0;
    left:20%;
    width:60%;
    margin-top:35px;
    margin-bottom:35px;
    z-index:3;
    border-radius: 7px;
    box-shadow: 6px 6px 20px black; 
}

#insideRelative{
    background-color:#f8f8f8;
    position: relative;
    top:0;
    left:20%;
    width:60%;
    margin-top:35px;
    margin-bottom:35px;
    z-index:3;
    border-radius: 7px;
    box-shadow: 6px 6px 20px black; 
}


#outside{
    position: fixed;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity:0.7;
    z-index:2;
    background-attachment:fixed;
}

.test{
    z-index:1;
}

我的HTML：

<div id="outside"></div>
<div id="insideAbsolute"></div>
<div id="insideRelative"></div>

<div class="testAbsolute">test position absolute</div>
<div class="testRelative">test position relative</div>

和我的jQuery

$('#outside').hide();
    $('#insideAbsolute').hide();
    $('#insideRelative').hide();

    $(document).on('click', '.testAbsolute', function () {
        $('#outside').show(0, function() { 
            $('#insideAbsolute').show(0, function() {
                $(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
                $(document).on('click','#outside',function(){
                    $('#insideAbsolute').html('');
                    $('#outside').hide();   
                });     
            }); 
        });

    });  

    $(document).on('click', '.testRelative', function () {
        $('#outside').show(0, function() { 
            $('#insideRelative').show(0, function() {
                $(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
                $(document).on('click','#outside',function(){
                    $('#insideRelative').html('');
                    $('#outside').hide();   
                });     
            }); 
        });

    });

Answer 1

这里有一个小技巧。在CSS中添加：

#insideAbsolute:after{
    content:'';
    height : 35px;
    width : 100%;
    position : absolute;
    bottom : -35px;
}

这会造成“虚假”的保证金！

小提琴：http://jsfiddle.net/QRpqs/1/

既不是绝对的位置，也不是位置相对的

1 个答案: