Установить позицию div для наложения другого div

Я пытаюсь установить панель наложения на контейнер нажатием какой-либо кнопки. Контейнер скрывается/отображается нажатием кнопки со стрелкой, но проблема в том, что положение меняется. Я хочу установить средний 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">
 
</div>
<div id="slickbox">
 This is the box that will be shown and hidden and toggled at your whim. :)
  close 
</div>
1 ответ

Если вы хотите поместить div внутри другого div или любого другого элемента, вы должны установить положение родителя как относительного, а child - как абсолютное. Я переписал ваш html-код следующим образом:

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

licensed under cc by-sa 3.0 with attribution.