Установить позицию 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.