Question

我试图在点击某个按钮时在容器上设置覆盖面板。单击箭头图像按钮可隐藏/显示容器，但问题是位置正在变化。我想在中心设置中间div，它不应该移动。

JQuery ::

    $('#slickbox').hide();
$('#slick-slidetoggle').click(function() {
    $('#slickbox').show('slide', 400);
    return false;
});
$('#close').click(function() {
    $('#slickbox').hide('slide', 400);
    return false;
});

CSS

#middle_panel {
    position:relative;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    /*padding-top:;*/
    margin-top:80px;
    border: solid 1px red;
    text-align: center;
    background-color: #D0D0D0;
    height: 500px;
    width: 48%;
    margin-left: 28%;
}

#slidingpanel {
    position :relative;
    border: solid 1px red;
    text-align: center;
    background-color: yellow;
    height: 500px;
    width: 1%;
    float:left;
    word-break: break-all
}

#slickbox {
    background: #EEE;
    border: 1px solid #900;
    height: 135px;
    display: none; 
}

HTML：

<div id="slidingpanel">
    <img id="slick-slidetoggle" src="css/down_arrow_select.jpg"></img>
</div>
<div id="slickbox">
    This is the box that will be shown and hidden and toggled at your whim. :)
    <a id="close"> close </a>
</div>

Answer 1

如果要将div放在另一个div或任何其他元素中，则必须将父级的位置设置为relative，将子级设置为绝对位置。我重写了你的html代码如下：

<html>
<head>
    <title></title>

    <style type="text/css">

    #close {
        position: absolute;;
        top: 15px;
        right: 20px
    }
    #slickbox {
        background: #EEE;
        border: 1px solid #900;
        height: 135px;
        display: block; 
        position: relative;
    }
    </style>

</head>
<body>

    <div id="slickbox">This is the box that will be shown and hidden and toggled at your whim. :)</div>
    <a id="close"> close </a>
</body>
</html>

设置div位置以覆盖另一个div

1 个答案: