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 に答える