Absolute div slide.Is it appropriate?

Question

in a website i want the user to navigate through 2 parts of information, with a slide effect, as seen in the jsFiddle below. I used absolute positioning, because in the website i have elements purposely overlapping each other, and absolute divs come handy as they doesn't change with the flow of the website.

Is this approach appropriate? I ve seen many posts that suggest that one shouldn't involve absolute divs in the document.

https://jsfiddle.net/wbLrsq56/1/

$('button').click(function(e){

$('#div2').addClass('slide');

});

html,body{
margin:0;
padding:0;
overflow-x:hidden;
}

.main{

position:relative;
height:100vh;
width:50%;
background:red;
}

#div1{
position:absolute;
top:0;
bottom:0;
right:0;
width:50%;
background:green;

}

#div2{
position:absolute;
right:0;
top:0;
bottom:0;
background:blue;
width:50%;
transform:translateX(100%);
transition:1000ms;


}

#div2.slide{
transform:translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

<button>
More Content
</button>
</button>


</div>

<div id="div1">
<h1>
Content 1.....
</h1>
</div>
<div id="div2">
<h1>

Content 2....
</h1>


</div>