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;
}

JsFiddle：https://jsfiddle.net/sawnma64/3/

是否可以在不使用padding-top或margin-top的情况下将容器放在幻灯片放映下方？我试过了clear:both;，但它没有用。

Answer 1

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

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

幻灯片下方的容器没有填充或边距

1 个答案: