绝对div幻灯片。它合适吗？

Question

在一个网站中，我希望用户使用幻灯片效果浏览2部分信息，如下面的jsFiddle所示。我使用绝对定位，因为在网站中我有相互重叠的元素，绝对的div会派上用场，因为它们不会随着网站的流程而改变。

这种方法是否合适？我看过很多帖子，表明一个人不应该在文件中涉及绝对的div。

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

＆＃13;

＆＃13;

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

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

});

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;