Html 响应容器流动性

我真的很感谢你的帮助。我目前正在制作一个响应性网页。我的布局有点像苹果。我有一个大标题（幻灯片），并在下面放了3张图片。滑块已经响应了，所以当我最小化它时，它会变小。问题是，放置在此滑块下的3个图像没有向上移动。我的意思是，它们不会随着滑块上升，所以它们之间存在巨大的差距。我认为我的问题是绝对位置，但我不确定如何解决它

以下是我的菜单、滑块和图片代码：

这是一个链接，适用于所有在发布的代码中看不到问题的人。我真的很感激你的帮助。莱罗

.rslides{
位置：绝对位置；
列表样式：无；
溢出：隐藏；
宽度：75%；
最高高度：88%；
排名：0；
左：12.5%；
填充：0；
保证金：0；
z指数：-1；
浮动：左；
}
李先生{
背面可见性：隐藏；
-webkit背面可见性：隐藏；
位置：绝对位置；
显示：无；
宽度：100%；
左：0；
排名：0；
}
李：第一个孩子{
位置：相对位置；
显示：块；
浮动：左；
}
.rslides img{
显示：块；
高度：自动；
浮动：左；
宽度：100%；
边界：0；
}
#新闻{
背景图片：url（“../bilder/news.png”）；
背景位置：50%50%；
背景重复：无重复；
背景尺寸：自动100%；
身高：32%；
宽度：计算值（75%/3）；
位置：绝对位置；
最高：88%；
左：12.5%；
}
#立场{
背景颜色：黄色；
身高：32%；
宽度：计算值（75%/3）；
位置：绝对位置；
最高：88%；
左：37.5%；
不透明度：0.85；
}
#öffungszeiten{
背景颜色：橙色；
身高：32%；
宽度：计算值（75%/3）；
位置：绝对位置；
最高：88%；
左：62.5%；
不透明度：0.85；
}
/*用脚垫垫和脚垫垫*/
#标志{
位置：绝对位置；
左：13%；
宽度：15%；
身高：15%；
排名：0；
z指数：1；
}
#页脚包装{
背景色：#A4CD6F；
位置：绝对位置；
宽度：75%；
最高：121%；
左：12.5%；
字号：85%；
}
导航{
背景色：#DBDAB7；
位置：绝对位置；
宽度：75%；
最高：0%；
左：12.5%；
不透明度：0.85；
}
保险商实验室{
保证金：0；
填充：0；
}
ulli{
列表样式：无；
}
ullia{
文字装饰：无；
浮动：对；
显示：表格单元格；
字体系列：Verdana；
颜色：黑色；
填充：15px 30px 15px 0；
}

可以使用媒体查询解决此问题。

---

该位置可以根据设备大小进行缩小。

我没有看到您提供的链接。但是在HTML中，只需按您希望的顺序排列即可。您想要在滑块下方显示的“三个图像”应该直接位于滑块下方。为什么你把一切都放在绝对的位置？在CSS中，滑块和三个图像应该是相对的或静态的，而不是绝对的

HTML:

<nav>
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Products</a>

        </li>
        <li><a href="#">Contact us</a>

        </li>
    </ul>
</nav>


<ul class="rslides">
  <li><img src="bilder/IMG_4819.jpg" width="100" height="100" alt="Ein Holzstapel hinter Stroh im Eingangsbereich"></img></li> 
  <li><img src="bilder/Bank.jpg" width="100%" height="75%" alt="Unsere Schöne Bank vor dem Eingangsbereich"></img></li>
  <li><img src="bilder/Kartoffeln.png" width="100" height="100" alt="Ein Mitarbeiten an der Gemüse Theke"></img></li> 
</ul> 

<a href="#"><div id="news"></div></a>
<div id="standort"></div>
<div id="öffnungszeiten"></div>

.rslides {
    position: relative; /*This changed*/
    list-style: none;
    overflow: hidden;
    width: 75%;
    max-height: 88%;
    top: 0;
    left: 12.5%;
    padding: 0;
    margin: 0;
    z-index: -1;
    float: left;
}
#news {
    background-image: url("../bilder/news.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 32%;
    width: calc(75%/3);
    /*position: absolute;*/ /*Avoid this*/
    top: 88%;
    left: 12.5%;
}
#standort {
    background-color: yellow;
    height: 32%;
    width: calc(75%/3);
    /*position: absolute;*/ /*Avoid this*/
    top: 88%;
    left: 37.5%;
    opacity: 0.85;
}
#öffnungszeiten {
    background-color: orange;
    height: 32%;
    width: calc(75%/3);
    /*position: absolute;*/ /*Avoid this*/
    top: 88%;
    left: 62.5%;
    opacity: 0.85;
}

---

用您提供的代码很难回答一些简洁的问题。例如，在您提供的HTML中，什么是小图像，什么是大图像？看起来您也应该使滑块容器具有响应性。看起来滑块变小了，但一些容器保持了它的高度。@chimos kk您需要什么？我可以使完整的网站在线。我真的需要解决这个问题。编辑这些图像是我的滑块的图像。它们就像RSlides的内容，在您提供的HTML中，“下面的三张图片”在哪里？？？@chimos这三张图片就是容器。我做了一个背景，所以这些是3img（新闻、标准和öffnungszeiten）。我真的非常感谢你的帮助，否则我必须删除40小时的工作并使用模板，因为我只有2周的时间用于此网站+5个网站的文本关于该网站：C@chimos我只需要一个想法，我可以实现如何放置3个容器始终像0.5%或10px或其他任何低于另一个容器。这很酷，但是当屏幕大小为X时，滑块不会变小，它始终是屏幕大小的75%，所以当我使用媒体方形来解决这个问题时，我需要制作100个这样的滑块。是的，我认为问题更多的是流动性，而不是响应性。你是否需要只为移动设备播放这三张图片。我不知道你的确切意思是“只为移动设备播放”。有照片的三个容器就像我这边的主要内容。当我的滑块高度变小时，我只需要它们粘在滑块下面，然后你可以做的是，通过媒体查询减少顶部百分比。我在本地做的，而且很有效。嗯，好的。但当我把它们改成相对时，它们就不在应该在的地方了。盒子更小，所以我必须相对于滑块放置所有3个容器？是这样吗？。顺便说一句，该链接是主帖子中的mediafire链接。@lyro:与滑块无关。默认CSS位置是静态的。如果它们都是静态的，它们将是一个接一个的，正如你所需要的。看起来你滥用了绝对定位。可能的情况是，您应该使用其他布局技术，并尽可能减少绝对值的使用。在某些罕见的情况下通常使用绝对定位。如果没有演示，我将无能为力，不想下载和调试您的文件。我认为你应该提供一个可访问的演示。顺致敬意，