var body = document.getElementById("div1");
body.classList.toggle("unslid");}
div.headr { z-index: 1;
width:100%;
background-color:#c2ccff;
position: absolute;
margin:-8px;
position: fixed;
height: 600px;
padding: 0px;
z-index: 1;
}
div.body{ z-index: 2 ;
background-color: #fff;
position: absolute;
top: 52px;
margin-left:-8px;
height: 100%;
width: 100%;
position: fixed;
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}
input.slide {
position: absolute;
left:48%;
top:37px;
}
slid {
background-color: #fff;
position: absolute;
top: 300px;
transition: 0.1s linear;
margin-left:-8px;
height: 100%;
width: 100%;
position: fixed;
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}
unslid {
background-color: #fff;
position: absolute;
top: 52px;
transition: 0.1s linear;
margin-left:-8px;
height: 100%;
width: 100%;
position: fixed;
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
</style>
<script>
</script>
</head>
<body>
<div class="headr">
<b style=" position:absolute; margin-left:34%;"> Cirno is strongest </b>
<input id="slide" class="slide" type="image" src="https://psv4.vk.me/c414924/u331653025/docs/0ca38f6b8139/slid.png?extra=xCAy-_y2OTFVdecmOKN5GnsSQniOg8mc7_75hsVJt6jCZJu5MI_Mrl_LgQY-aqYD1Mqr036lAix_DIm72cH0tDCxdD8v4uiClKcO6oA1OkM148fP"width="2%" height="2%" outline="0px">
</div>
<div id="body" class="body">
</div>
</body>
</html>