title: Position absolute element: How to make him responsive
body: <p>I'm doing image slider with two arrow keys, problem is when I try to change my view-port to smaller. Image slider is changing his size responsively but arrow keys not. Don't know how to attach them to image slider and make them responsive. I've found this problem when switch from monitor to my PC with smaller resolution and right arrow key disappeared.</p>
  
  <p>Here is example of my struggle.
  <a href="https://jsfiddle.net/q57qmtxg/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="slider"&gt;&lt;img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt=""&gt;           &lt;/div&gt;
  
    &lt;div class="arrows index"&gt;
      &lt;a href="#" class="left"&gt;&lt;&lt;/a&gt;
      &lt;a href="#" class="right"&gt;&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
   .container{
  
    max-width:1100px;
    margin: 0 auto;
    width:100%;
    height: auto;
  }
  .slider{
    position:relative;
  }
  
  .slider img{
    position:absolute;
    width:100%;
    height:auto;
    left:0;
    top:0;
    object-fit:cover;
  }
  
  .arrows {
    font-size: 3.125em;
    position: relative;
    width: 100%;
  }
  
  .arrows .left {
    position: absolute;
    color: white;
    top: 8em;
    left: 0.4em;
    border: 0.02em solid #fefefe;
    border-radius: 0.14em;
    padding: 0em 0.4em 0.2em;
    background: #F2B8A2;
  }
  
  .arrows .right {
    position: absolute;
    color: white;
    top: 8em;
    left: 20.2em;
    border: 0.02em solid #fefefe;
    border-radius: 0.14em;
    padding: 0em 0.4em 0.2em;
    background: #F2B8A2;
  }
  </code></pre>