title: How create responsive slider with position relative and absolute?
body: <p>Im trying to build simple fadeIn-Out slider. 
  How to have responsive slides and stacked at the same time? Maybe there is another solution for this problem (I mean: not using position relative/absolute)?</p>
  
  <p>I use parent element with "position relative" and slides with "position absolute" to stack them one on the top of another (then I can use opacity to fade between slides). The problem is that slides are not responsive. If I remove "position relative" from parent element slides are resizing, but they ignore parent element and fill the whole screen. </p>
  
  <pre><code>     body {
          width: 960px;
          margin: 0 auto;
       }
       .slides {
          position: relative;
        }
       .slides li img {
         width: 100%;
         position:absolute;
         height: auto;
         top:0;
         left:0;
       }
  
      &lt;div id="microslider"&gt;
              &lt;ul class="slides"&gt;
                  &lt;li&gt;&lt;img src="slides/slide-1.jpg" alt=""&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="slides/slide-2.jpg" alt=""&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="slides/slide-3.jpg" alt=""&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="slides/slide-4.jpg" alt=""&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>