动画滑动菜单中DIV的动画动作消失在BODY或WRAPPER后面吗？

Question

侧边栏菜单上的DIV应该移动并保持在页面顶部。我试过设置CSS z-index，display，float。没有什么可以使div置于顶部的动画。还尝试过使其可拖动，但这并不能解决，也不安全。所以我想坚持一种简单的动画。

我想念什么？

如何使按钮从菜单中抬起并漂浮在所有内容的顶部？还是我必须制作一个重复的div来制作动画并隐藏原始按钮？

我不得不进行大量调整以使其适合摘要，实时测试也在以下环境下进行：http://testing.2x2p.com

// JavaScript MyConsole Inline
function consoleMessage(cons_id,message,fatal){
// cons_id must be string id of output element
	if(typeof(cons_id)!='string'){alert('invalid console cons_id received: '+message);return false;}
	// Has dependency on moment.js
	// stamp = moment().format('YYYY-MM-DD HH:mm:ss.SSS');
	stamp = (new Date()).getTime();
	output = document.getElementById( cons_id );
	linenr = (output.value.split("\n")).length;
	append = (linenr+": "+stamp+": "+message)
	output.value = append+"\n"+output.value;
// if fatal is 1 color change if 2 also alert the message to screen
	if(fatal){
		output.style.backgroundColor="#FC9";
		if(fatal>1){alert(message);}
	}else{
		output.style.backgroundColor="#FFC"
	}
// Has dependency on jquery.js
	var $textarea = $('#'+output.id);
	$textarea.scrollTop(0);
	return true;
}

function consoleToggleSize( cons_id, page_id ) {
	if(typeof(cons_id)!='string'){id='console-text';}
	if(typeof(page_id)!='string'){id='main-page-wrap';}
	cons = document.getElementById( cons_id );
	page = document.getElementById( page_id );
    if( cons.style.height == '24px' || cons.style.height == '' ){
  		consoleMessage('console-text','console open');
		cons.style.height = '200px';
		page.style.marginBottom = '-200px';
		document.getElementById( 'console-icon' ).innerHTML = "−";
	}else{
  		consoleMessage('console-text','console hide');
        cons.style.height = '24px';
		page.style.marginBottom = '-24px';
		document.getElementById( 'console-icon' ).innerHTML = "+";
	}
}

function openMainMenu() {
  check = document.getElementById("main-menu-toggle");
  if(check.value==false){
	  consoleMessage('console-text','main-menu open');
	  document.getElementById("main-menu").style.width = "240px";
	  document.getElementById("main-page-wrap").style.backgroundColor = "rgba(0,0,0,0.4)";
	  document.getElementById("main-menu-close").style.display = "block";
	  document.getElementById("main-menu-open").style.display = "none";
	  check.value='1';
  }
}

function hideMainMenu() {
  check = document.getElementById("main-menu-toggle");
  if(check.value==true){
	  consoleMessage('console-text','main-menu hide');
	  document.getElementById("main-menu").style.width = "48px";
	  document.getElementById("main-page-wrap").style.backgroundColor = "white";
	  document.getElementById("main-menu-close").style.display = "none";
	  document.getElementById("main-menu-open").style.display = "block";
	  check.value='0';
  }
}

// JQuery based animation
function setMenuItemAnimation(menu_item_id){
  $(menu_item_id).click(function(){
	consoleMessage('console-text','animation started for '+this.id);
	$(this).css("z-index", "99999");
	$(this).css("float", "1");
    $(this).animate({
      left: "-=600px",
    }, {
      duration: 444,
      easing: "linear",
      complete: function(){
		$(this).css("z-index", "1");
		hideMainMenu();
		consoleMessage('console-text','animation ended for '+this.id);
      }
    });
  });
};

setMenuItemAnimation('#main-menu-item-1');
setMenuItemAnimation('#main-menu-item-2');

CSS:

/* Begin main-page CSS */
.main-page-wrap {
	z-index:0;
  padding: 8px;
    margin-left: auto;
    margin-right: auto;
  min-height: 100%;
	max-width: 100%;
  height: 1px;  /*any value will do as it auto expands later*/
  margin-bottom: -24px; /* minus page-footer height */
  background-color: #FFF;
  box-sizing:border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
	transition:             margin-bottom 333ms ease, background-color 555ms;
        -moz-transition:    margin-bottom 333ms ease, background-color 555ms;
        -ms-transition:     margin-bottom 333ms ease, background-color 555ms;
        -o-transition:      margin-bottom 333ms ease, background-color 555ms;
        -webkit-transition: margin-bottom 333ms ease, background-color 555ms;
}
.main-page-wrap:after {
}

.main-page-item {
	margin-top: -32px;
	margin-left: -48px;
}
/* Begin menu CSS */
.main-menu-wrap 
{
	background-color:inherit;
	float:right;
	display:inline-block;
	box-sizing:border-box;
	height:100%;
	  margin: 0;
	  padding: 0;
	  min-height: 100%;
	  text-align:left;
}
.main-menu-slide {
  width: 48px;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #FFC;
  overflow-x: hidden;
    transition:             width 333ms ease;
        -moz-transition:    width 333ms ease;
        -ms-transition:     width 333ms ease;
        -o-transition:      width 333ms ease;
        -webkit-transition: width 333ms ease;
  height:100%;
  text-align:left;
  border-left: 1px solid #999;
}
.main-menu-slide .main-menu-title {
	position:relative;
	width:144px;
  padding: 0 0 0 0;
  margin: 8px 8px 16px 48px;
  box-sizing:border-box;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  box-sizing:border-box;
  transition: 0.2s;
  display:block;
  overflow:visible;
  text-align:center;
}
.main-menu-slide .main-menu-item {
	position:relative;
	width:144px;
  padding: 8px 0 8px 0;
  margin: 8px 8px 16px 48px;
  box-sizing:border-box;
  text-decoration: none;
  font-size: 15px;
  font-weight:bold;
  color: #818181;
  box-sizing:border-box;
  transition: 0.2s;
  display:block;
  overflow:hidden;
  background-color:#CCC;
  text-align:center;
	draggable="true";
  border-radius: 16px 16px 16px 16px;
  box-shadow: 			2px 2px 4px #000;
  -webkit-box-shadow:	2px 2px 4px #000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:		2px 2px 4px #000;  /* Firefox 3.5 - 3.6 */
}
.main-menu-slide .main-menu-item:hover {
  color: #FFF;
    display:;
}
.main-menu-slide .main-menu-close {
  position: relative;
  top: 0;
  left: 16px;
  font-size: 32px;
  display: none;
  transition: display 0.5s;
  overflow:hidden;
  height:32px;
  cursor:			pointer;
}

.main-menu-slide .main-menu-open {
  position: relative;
  display:inline;
  top: 3px;
  left: 13px;
  font-size: 24px;
  transition: display 0.5s;
  overflow:hidden;
  height:32px;
  cursor:			pointer;
}

@media screen and (max-height: 450px) {
  .main-menu-slide {padding-top: 15px;}
  .main-menu-slide a {font-size: 18px;}
}/* Begin console CSS */
#console-text
{
  background:		inherit;
  box-sizing:		border-box;
  position:			fixed;
  top: 0;
  float:			left;
  height:			25px;
  transition:		height 333ms ease;
  -moz-transition:    height 333ms ease;
  -ms-transition:     height 333ms ease;
  -o-transition:      height 333ms ease;
  -webkit-transition: height 333ms ease;
  resize:			none;
  padding-left:		4px; 
  font-family:		monospace; 
  font-size:		17px;
  background-color:	#FFC;
  overflow:			hidden;
}
.console-text, .main-page-wrap:after 
{
  height:		24px; 
  width:		100%;
}
.console-icon 
{
  position:		fixed;
  top:			0px;
  right:		5px;
  font-size:	24px;
  font-weight:	bolder;
  float:		right;
  cursor:		pointer;
  font-family:	monospace; 
}

/* End console CSS */
html, body {
  margin: 0;
  height: 100%;
  background-color:#FFC;
  font-family: Tahoma, Geneva, sans-serif;
}

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id='like-body'>
    <div class="main-page-wrap" id="main-page-wrap">
    <div id="main-page-content" class="main-page-item">
hello world<br>(main-page-wrap)
</div>    </div>
</div>
<div class="main-menu-wrap" id="main-menu-wrap">
<div id="main-menu" class="main-menu-slide" onMouseOver="openMainMenu()">
	<input id="main-menu-toggle" type="hidden" value="0">
    <span id="main-menu-close" class="main-menu-close" onclick="hideMainMenu()">&times;</span>
    <span id="main-menu-open" class="main-menu-open" onclick="openMainMenu()">&#9776;</span>
    <div id="main-menu-title" class="main-menu-title">
    	main menu
    </div>
    <div id="main-menu-item-1" class="main-menu-item">
    	click to anim
    </div>
    <div id="main-menu-item-2" class="main-menu-item">
    	click to anim
    </div>

</div>
</div>
<footer>
    <div id="console-wrap" onMouseUp="consoleToggleSize('console-text','main-page-wrap');">
    <textarea 
        class="console-text" 
        id="console-text" 
        cols="" 
        rows="" 
        readonly="readonly" 
        wrap="off"></textarea>
    <div id="console-icon" class="console-icon">&#x2B;</div>
</div>
</footer>