0

我正在尝试通过单击某个按钮在容器上设置覆盖面板。容器在单击箭头图像按钮时被隐藏/显示，但问题是位置正在改变。我想将中间 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>
4

1 回答 1

2

如果要将 div 放入另一个 div 或任何其他元素中，则必须将父级的位置设置为相对，将子级的位置设置为绝对。我重写了你的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>
于 2013-09-02T10:34:38.407 回答