css - 如何创建相对和绝对位置的响应式滑块？

我试图建立简单的fadeIn-Out滑块。
如何同时放置响应式幻灯片和堆叠？也许对于这个问题还有另一种解决方案（我的意思是：不使用相对位置/绝对位置）？

我将父元素与“相对位置”一起使用，并将幻灯片与“绝对位置”一起使用，将它们一个堆叠在另一个顶部（然后，我可以使用不透明度在幻灯片之间淡入淡出）。问题在于幻灯片没有响应。如果我从父元素中删除“相对位置”，则幻灯片将调整大小，但它们会忽略父元素并填充整个屏幕。

     body {
        width: 960px;
        margin: 0 auto;
     }
     .slides {
        position: relative;
      }
     .slides li img {
       width: 100%;
       position:absolute;
       height: auto;
       top:0;
       left:0;
     }

    <div id="microslider">
            <ul class="slides">
                <li><img src="slides/slide-1.jpg" alt=""></li>
                <li><img src="slides/slide-2.jpg" alt=""></li>
                <li><img src="slides/slide-3.jpg" alt=""></li>
                <li><img src="slides/slide-4.jpg" alt=""></li>
            </ul>
        </div>

最佳答案

为了创建幻灯片，您可以将此jsfiddles用作参考：jsfiddle.net/foffka/c0wjfd6j和jsfiddle.net/kidino/qsyxR
关于“响应式”主题，有几种可能性，取决于您想要什么。


我建议您将宽度设置为.slides li。
您已经在width: 100%; height: auto;中写了.slides li img。这意味着图像将适应其父对象宽度的100％。如果将例如li设置为300px，则每个图像都将适应该值。
如果希望每个图像的宽度为设备宽度的50％，请在50vw选择器内设置li，然后查看调整页面大小时会发生什么。
如果您希望在移动设备中（例如480像素或更小）每个图像都具有设备宽度的100％，则可以设置：

    @media (max-width: 480px) {
        .slides li {
            width: 100vw;
        }
    }

您也可以使用最小宽度和最大宽度值。等等。

希望能帮助到你。