让绝对定位的元素与布局的其余部分一起流动答案

【问题标题】：Getting absolutely positioned elements to flow with the rest of a layout让绝对定位的元素与布局的其余部分一起流动
【发布时间】：2016-01-18 03:29:52
【问题描述】：

我有一个幻灯片，它通过将图像绝对定位在另一个之上，然后更改我想要显示的任何幻灯片的 z-index 来工作。问题是我想把它移到中间，在幻灯片的两边都有“上一个”链接和“下一个”链接。

我一直在尝试创建一个在绝对定位的项目周围具有相对定位的容器，并且可以让幻灯片四处移动，但是下一个链接不会显示在幻灯片的另一侧（我希望不会使用带边距的 hack 来打乱页面的流程）。

我的目标是能够像处理与页面其余部分一起流动的任何其他框一样处理幻灯片框。有没有办法做到这一点？

我的html

   <a id="prevLink" href="#">Prev</a>
    <div class="container">
      <ul id="slideshow">
        <li class="current">First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
    </div>
    <a id="nextLink" href="#">Next</a>

我的CSS：

.container {
  position: relative;
}
#slideshow {
  position: relative;
  list-style-type: none;
}
.current {
  z-index: 99;
}
#slideshow li {
  position: absolute;
  width: 5em;
  height: 5em;
  background-color: #333;
  font-size: 3em;
  color: #fff;
}

幻灯片链接：http://codepen.io/KenjiCrosland/pen/QyqVaz

【问题讨论】：

标签： html css

【解决方案1】：

您需要进行一些更改：

将 #container 设置为 display:inline-block 并给它一个 width 以便它保持内联。
从#slideshow 中删除默认的padding。

试试这个 CSS：

.container {
  position: relative;
  width:15em;
  display:inline-block;
}
#slideshow {
  position: relative;
  list-style-type: none;
  padding:0;
}
.current {
  z-index: 99;
}
#slideshow li {
  position: absolute;
  width: 5em;
  height: 5em;
  background-color: #333;
  font-size: 3em;
  color: #fff;
}

Here's a fork of your Pen.

【讨论】：

【解决方案2】：

您需要将width 和height 分配给.container 并将其居中。

在absolute prev 和 next 中设置，在.container 中添加一些padding，这样它就有了按钮空间。 http://codepen.io/anon/pen/MKERWZ

.container {
  position: relative;
  width: 15em;/* 3x5em of lis */
  height:15em;
  padding: 0 4em;/* room on left/right for buttons */
  margin: auto;
  background: gray;/* demo purpose, lets see where it stands */
}

#slideshow {
  list-style-type: none;
  margin:0  ;
  padding:0;
}

.current {
  z-index: 99;
}

#slideshow li {
  position: absolute;
  width: 5em;
  height: 5em;
  background-color: #333;
  font-size: 3em;
  color: #fff;
}
#prevLink,
#nextLink {
  position:absolute;
  top:50%;
  line-height:0;/* to set in center without translate() */
}

#prevLink {left:0.75em;
}

#nextLink {right:0.75em;
}

【讨论】：