set div position to overlay another div

Я пытаюсь установить панель наложения на контейнер нажатием какой-либо кнопки. Контейнер скрывается/отображается нажатием кнопки со стрелкой, но проблема в том, что положение меняется. Я хочу установить средний div в центр, и он не должен двигаться.set div position to overlay another 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>

источник

2013-09-02 anam

Где мой javascript? –

показать свой код в http://jsfiddle.net/ –

@RoryMcCrossan проверить обновления для jquery ... – anam

Если вы хотите поместить 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-02 10:34:38

Если вы нашли этот ответ полезным, пожалуйста, проголосуйте. –

set div position to overlay another div

ответ

Смежные вопросы