How to overlay div without effecting position of other div elements - html

Question

I am attempting to add the wrapperleft and wrapperright divs inside of the bareEditorial div without it affecting the positioning of any of the elements within the bareEditorial div. I want the cursor to change from the left 50% of the viewport to the right 50% within this div
Does anyone have any suggestions on how to achieve this?
Here is my pen https://codepen.io/anon/pen/XQeGMZ
.wrapperleft {
width: 50vw;
display: inline-block;
cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDBweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgNDAgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQxLjEgKDM1Mzc2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAuMDAwMDAwLCAxMi44MDIwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTIwLjAwMDAwMCwgLTEyLjgwMjAwMCkgIiBwb2ludHM9IjI3LjE5OCAyNS42MDQgMzkuNDk0IDEzLjMwOCA0MCAxMi44MDIgMzkuNDk0IDEyLjI5NiAyNy4xOTggMCAyNi4xODUgMS4wMTIgMzcuMjYgMTIuMDg2IDAgMTIuMDg2IDAgMTMuNTE4IDM3LjI2IDEzLjUxOCAyNi4xODUgMjQuNTkyIj48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg=="), auto;
}
.wrapperright {
width: 50vw;
display: inline-block;
float: right;
cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAnIGhlaWdodD0nMjYnIHZpZXdCb3g9JzAgMCA0MCAyNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMjcuMTk4IDI2LjYwNGwxMi4yOTYtMTIuMjk2LjUwNi0uNTA2LS41MDYtLjUwNkwyNy4xOTggMWwtMS4wMTMgMS4wMTJMMzcuMjYgMTMuMDg2SDB2MS40MzJoMzcuMjZMMjYuMTg1IDI1LjU5MnonLz48L3N2Zz4K"), auto;
}
<div class="wrapperleft" onclick="plusSlides(-1)"></div>
<div class="wrapperright" onclick="plusSlides(1)"></div>
<div class="bareEditorial">
<div class="slideshow-container">
<h1>Bare Boutique Campaign</h1>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
</div>
</div>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="nextprevious">
<div class="numbertext">(<span>3</span> / <span>3</span>)</div>
</div>
</div>
</div>

Answer 1

Hi you can use "position: absolute" as the css property to adjust Divs without affecting other elements.
I have edited your css, you can go through it n replace and check once,
.wrapperleft {
width: 50vw;
cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…M3LjI2IDEzLjUxOCAyNi4xODUgMjQuNTkyIj48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==), auto;
height: 50px;
background: blue;
position: absolute;
left: 0;
}
.wrapperright {
width: 50vw;
float: right;
cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAnIGhlaWdodD0nMjYnIHZpZXdCb3g9J…4wMTJMMzcuMjYgMTMuMDg2SDB2MS40MzJoMzcuMjZMMjYuMTg1IDI1LjU5MnonLz48L3N2Zz4K), auto;
height: 50px;
background: red;
position: absolute;
right: 0;
}