html - 创建两个重叠 DIV 的按钮

Question

我想创建两个按钮，使用如下 HTML 覆盖一个 div:

*两个相同的 DIV，每边都有两个按钮重叠。所以一个 div 有两个重叠的按钮。

我希望按钮是透明的并覆盖在 div 上，但我不确定该怎么做。

我已经创建了我的 Div:

 <div class="container">
    <div id="slides">
      <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">

    </div>
  </div>

我想覆盖的 div 称为“容器”，两个按钮是:

 <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>

在 CSS 或 HTML 中有什么方法可以做到这一点吗？

Answer 1

您必须将按钮完全放置在图像之上。为此，首先让 .container 占据 position: relative; 然后将按钮作为 .slides div 的同级放置并放置它们绝对。

.container {
  position: relative;
}

.slidesjs-navigation {
  position: absolute;
  top: 0;
  display: block;
  width: 50%;
  height: 100%;
  background: rgba(0,0,0,0); /* Added in case you want to transition this */
}

.slidesjs-navigation:hover {
  background: rgba(0,0,0,0.25); /* Makes the hovered button visible */
}

.slidesjs-previous {
  left: 0;
}

.slidesjs-next {
  right: 0; /* left: 50%; works too */
}

.slides img {
  display: block; /* Avoids the space usually seen under inline images */
  width: 100%; /* Ensures the image takes up the whole width */
}

<div class="container">
    <div id="slides" class="slides">
      <img src="https://c1.staticflickr.com/5/4147/5087404401_d24513119a_b.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"><!-- original `src`: "img/example-slide-1.jpg" -->
    </div>
    <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
    <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
  </div>