Fix (glue) the position of % values on parent resize - css

Question

I have a div that sits at 15% width of the screen. On click, that width increases to 100%. It's basically a pop-out content area.
In order to center the icons inside of the original 15% width parent in a nice, responsive manner, they are set as such:
.parent
position: relative;
width: 15%;
.icons;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
This basically creates an aside on the left with an icon toggle. The icons are centered inside of parent. But, when the icon is clicked I resize the parent to slide out and become width: 100%;. All of a sudden, those nice percentage values change relative to the parent and move into the center of the screen. I want to freeze them so they don't move! In other words, I would like them to stay in the position they were in when the parent div was 15%.
Fiddle: https://jsfiddle.net/ra6qa9jf/

Answer 1

The easiest solution would be to remove the icon div from the red box and give it a new parent. Then style the new parent to always have a width of 15% and to have position absolute so that it appears as a layer over the red box. So your new HTML might be:
<div class="parent"></div> //This is the red box, same styling as before
<div class="parent-2"> //This is the new parent container for the icons
<div class="icons">
<i class="fa fa-plus"></i>
</div> //This is the icon, same as before
</div>
And the corresponding new CSS:
.parent-2 {
position: absolute;
width: 15%;
height: 100%;
top: 0px;
left: 0px;
}
Lastly you'd just need to update your javascript so that the onClick listener changed the correct div width:
(function () {
var parent = document.getElementsByClassName('parent')[0];
var icons = document.getElementsByClassName('icons')[0],
toggle = false;
icons.addEventListener('click', function(event) {
toggle = +!toggle;
if (toggle) {
parent.style.width = "100%";
} else {
parent.style.width = "15%";
}
});
}());
Refer code:
(function() {
var parent = document.getElementsByClassName('parent')[0];
var icons = document.getElementsByClassName('icons')[0],
toggle = false;
icons.addEventListener('click', function(event) {
toggle = +!toggle;
if (toggle) {
parent.style.width = "100%";
} else {
parent.style.width = "15%";
}
});
}());
.parent {
position: relative;
width: 15%;
height: 100%;
background-color: red;
transition: width 400ms ease-in-out;
}
.parent-2 {
position: absolute;
width: 15%;
height: 100%;
top: 0px;
left: 0px;
}
.icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 60px;
}
.icons:hover {
cursor: pointer;
}
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="parent"></div>
<div class="parent-2">
<div class="icons">
<i class="fa fa-plus"></i>
</div>
</div>