幻灯片下方的容器，不带填充或边距

Question

带有position:absolute;的全宽幻灯片。现在我想要一个容器，所有内容都将位于幻灯片下方，但我不能使用 padding-top/margin-top，因为幻灯片的高度将取决于屏幕宽度。

HTML5：

<main>
  <ul class="slideshow">
    <li><img src="http://i.imgur.com/SiSnJdh.jpg"></li>
  </ul>
  <div class="container">
    <p>Hello Stackoverflow!</p>
  </div>
</main>

.CSS：

.slideshow {
  position: absolute;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index:300;
  margin-top:-15px;
}
.slideshow li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  z-index:400;
}
.slideshow li:first-child {
  position: absolute;
  display: block;
  float: left;
  z-index:400;
}
.slideshow img {
  display: block;
  z-index:400;
  min-height:180px;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  overflow:hidden;
  object-fit: cover;
}
.container {
  width:400px;
  margin:0 auto;
  position:relative;
}

小提琴：https://jsfiddle.net/sawnma64/3/

是否可以在不使用padding-top或margin-top的情况下将容器放在幻灯片下方？我已经尝试过clear:both;但它不起作用。

Answer 1

主要问题是幻灯片本身设置为 position:absolute . 此位置属性将幻灯片从文档流中取出，从而导致其重叠并隐藏其余内容。 无论使用什么幻灯片插件，似乎都需要幻灯片具有非静态位置属性（除 position:static 以外的任何位置属性，这是未设置位置时的默认值）。 这是因为各个幻灯片是position:absolute的，这取决于非静态父级的尺寸参考。

对于您的情况，position:relative是您需要的。 它提供了该参考点或position:absolute子项，但不会将幻灯片从文档流中取出。