[SOLUCIONADO] Problemas con div que se superpone

[ccodesido]

Hola Amigos! Estoy con un verdadero dolor de cabezas con un div que se me esta superponiendo. Estoy armando un formulario modal y me encuentro con que el div body se me superpone con los divs superiores del header, la estructura es la siguiente:

<DIV contenerdor>
<DIV Header>
<DIV titulo></DIV>
<DIV boton close></DIV>
</DIV>
<DIV body>
</DIV>
</DIV>

Dejo una captura de pantalla par que quede mas claro...



Y aca dejo el codigo para que lo puedan revisar. Desde ya muchas gracias por la ayuda que puedan brindarme.

HTML

<script type="text/javascript">
function weight_add_show() {
$('#modal_weight_add').fadeIn();
$('#modal-background').fadeTo(500, .5);
}

function weight_add_hide() {
$('#modal_weight_add, #modal-background').fadeOut();
}

</script>

<div id="modal_weight_add" class="modal-form modal-styled">
<div class="modal-heading">
<div class="modal-title">Controle de Peso</div>
<div class="modal-btnclose" onClick=weight_add_hide()><i class="fa fa-times fa-lg"></i></div>
</div>
<div class="modal-body">
<span>Conteúdo do form</span>
</div>
</div>
<div id="modal-background" class="modal-background"></div>

CSS

.modal-form {
display: none;
position: fixed;
top: 50%;
left: 50%;
box-sizing: border-box;
z-index: 10;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.modal-background {
display: none;
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}

.modal-styled {
width: 50%;
min-width: 100px;
overflow: auto;
background: #FFFFFF;
border: 2px solid;
border-color: #60466E;
border-radius: 5px;
-webkit-border-radius: 5px;

box-shadow: 0 3px 14px -4px #000;
-ms-box-shadow: 0 3px 14px -4px #000;
-moz-box-shadow: 0 3px 14px -4px #000;
-webkit-box-shadow: 0 3px 14px -4px #000;
box-shadow: 0 3px 14px -4px #000;
}

.modal-heading {
background-color: #60466E;
padding: 10px 15px;
}

.modal-title {
float:left;
font-size: 16px;
color: #A2A2A2;
font-weight: bold;
}

.modal-btnclose {
float:right;
color: #A2A2A2;
font-weight: bold;
}
.modal-btnclose:hover {
color: #E85600;
}

.modal-body {
clear:both;
padding: 15px;
}

[superweb360]

has puesto onClick=weight_add_hide() y debería ser con comillas onClick="weight_add_hide()"

por otro lado, estás invocando con onClick="weight_add_hide()" una función que está escrita en jQuery. La manera correcta sería hacer esto:

Código Javascript:

$('.modal-btnclose').click(function(){
weight_add_hide();
});
 

[ccodesido]

Gracias por la respuesta, si le pongo comillas el IDE me tira un error de sintaxis, de todas formas, asi como está funciona perfecto, el formulario se muestra y se oculta perfectamente, solo que al momento de visualizarlo se superponen los DIVs.

[superweb360]

pon esto:

Código CSS:

.modal-heading {
background-color: #60466E;
padding: 0px 15px;
height:20px;
}
 

[siddartha23]

Como el .modal-title está posicionado con float necesitas añadirle un clearfix a su contenedor, por ejemplo añadirle al .modal-heading un overflow:hidden...

[ccodesido]

Funciono!!! Gracias master!