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

i have div sits @ 15% width of screen. on click, width increases 100%. it's pop-out content area.

in order center icons inside of original 15% width parent in nice, responsive manner, set such:

.parent   position: relative;   width: 15%;  .icons;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); 

this creates aside on left icon toggle. icons centered inside of parent. but, when icon clicked resize parent slide out , become width: 100%;. of sudden, nice percentage values change relative parent , move center of screen. want freeze them don't move! in other words, them stay in position in when parent div 15%.

fiddle: https://jsfiddle.net/ra6qa9jf/

the easiest solution remove icon div red box , give new parent. style new parent have width of 15% , have position absolute appears layer on red box. new html might be:

<div class="parent"></div> //this red box, same styling before <div class="parent-2"> //this new parent container icons     <div class="icons">         <i class="fa fa-plus"></i>     </div> //this icon, same before </div> 

and corresponding new css:

.parent-2 {     position: absolute;     width: 15%;     height: 100%;     top: 0px;     left: 0px; } 

lastly you'd need update javascript onclick listener changed 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>