Adding html using Tampermonkey make the original content down

Question

I am trying to add a floating menu on a page using tampermonkey with below code. but after adding the html, it seems the menu can be shown, but the original page content went down which is not the expected effect.

 var floatingMenu = document.createElement( 'div' );
       floatingMenu.id = 'floatingMenu';
       GM_addStyle(
           '* {' +
           'padding: 0;'+
           'margin: 0;'+
           'list-style: none;'+
           'text-decoration: none;'+
           '}'+

           '.sidebar {'+
           'z-index: 1;'+
           'position: fixed;'+
           'right: -250px;'+
           'top: 40px;'+
           'width: 250px;'+
           'height: 100%;'+
           'background: #042331;'+
           'transition: all 0.5s ease;'+
           '}'+
           '.sidebar header {'+
           'font-size: 22px;'+
           'color: white;'+
           'line-height: 70px;'+
           'text-align: center;'+
           'background: #063146;'+
           'user-select: none;'+
           '}'+
           '.sidebar ul a {'+
           'display: block;'+
           'height: 100%;'+
           'width: 100%;'+
           'line-height: 65px;'+
           'font-size: 20px;'+
           'color: white;'+
           'padding-right: 40px;'+
           'box-sizing: border-box;'+
           'border-bottom: 1px solid black;'+
           'border-top: 1px solid rgba(255, 255, 255, 0.1);'+
           'transition: 0.4s;'+
           '}'+
           'ul li:hover a {'+
           'padding-right: 50px;'+
           '}'+
           '.sidebar ul a i {'+
           'margin-right: 16px;'+
           '}'+
           '#check {'+
           'display: none;'+
           '}'+
           'label #btn,'+
           'label #cancel {'+
           'position: absolute;'+
           'background: #042331;'+
           'border-radius: 3px;'+
           'cursor: pointer;'+
           '}'+
           'label #btn {'+
           'right: 40px;'+
           'top: 40px;'+
           'font-size: 1px;'+
           'color: white;'+
           'padding: 6px 12px;'+
           'transition: all 0.5s;'+
           '}'+
           'label #cancel {'+
           'z-index: 1111;'+
           'right: -195px;'+
           'top: 45px;'+
           'font-size: 30px;'+
           'color: #0a5275;'+
           'padding: 4px 9px;'+
           'transition: all 0.5s ease;'+
           '}'+
           '#check:checked ~ .sidebar {'+
           'right: 0;'+
           '}'+
           '#check:checked ~ label #btn {'+
           'right: 250px;'+
           'opacity: 0;'+
           'pointer-events: none;'+
           '}'+
           '#check:checked ~ label #cancel {'+
           'right: 195px;'+
           '}'+
           '#check:checked ~ section {'+
           'margin-right: 250px;'+
           '}'+
           'section {'+
           'background: url(/img/bg.jpeg) no-repeat;'+
           'background-position: center;'+
           'background-size: cover;'+
           'height: 100vh;'+
           'transition: all 0.5s;'+
           '}'
           );

       floatingMenu.innerHTML = '  <input type="checkbox" id="check" />' +
           '<label for="check"> ' +
           '<i class="fas fa-bars" id="btn"></i>' +
           '<i class="fas fa-times" id="cancel"></i> '+
           '</label>' +
           '<div class="sidebar">'+
           '<header>My App</header>'+
           ' <ul>'+
           '<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>' +
           '<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>' +
           '<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>'+
           '<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>' +
           '<li><a href="#"><i class="far fa-question-circle"></i>About</a></li>'+
           '<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>'+
           '<li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>'+
           '</ul>'+
           '</div><section></section>';
       document.body.append(floatingMenu);

Normal one before the code addition:

Is there any tweak needs to be done on the css style?

Thanks.

Answer 1

Was caused by the last <section></section>, it got resolved after the block removal...