Question

我的结构如下：

＆＃13;

.a {
  display: block;
  height: auto;
  left: 11px;
  top: 89.3px;
  width: auto;
  position: absolute;
}
.a img {
  display: block;
  height: auto;
  width: 100%;
}
.b1 {
  position: absolute;
}
.prev {
  background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
  border: medium none !important;
  height: 25px;
  left: -807px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  top: -220px;
  width: 25px;
}
.prev span {
  text-indent: -9999px;
}

＆＃13;

<div class="a">
  <div class="a1">
    <img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
  </div>
  <div class="b">
    <div class="b1">
      <button class="prev">
        <span>previous</span>
      </button>
      <button class="nxt">
        <span>next</span>
      </button>
    </div>
  </div>
</div>

＆＃13;

现在问题是，我需要修复shasta-daisy-3.jpg图像上的上一个和下一个按钮图像。为此，我使用position: absolute作为nxt和prev类。但是当我调整窗口大小时，我的上一张图像不断向左拖动直到它消失，我无法将其粘贴到图像上的一个地方

Answer 1

您需要使用position: relative;创建包装器。

Answer 2

您的问题是，您没有将top和left值提供给.b位置，因此仅仅通过说position: absolute就不会真正得到绝对的定位。您必须添加：top:0; left:0（或右侧，底部），以便它覆盖您的图像，如下所示：

.a {
  display: block;
  height: auto;
  left: 11px;
  top: 89.3px;
  width: auto;
  position: absolute;
}
.a img {
  display: block;
  height: auto;
  width: 100%;
}
.b1 {
  position: absolute;
  top: 0;
  left: 0;
}
.prev {
  background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
  border: medium none !important;
  height: 25px;
  left: ;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  top: 0;
  width: 25px;
}
.prev span {
  text-indent: -9999px;
}

<div class="a">
  <div class="a1">
    <img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
  </div>
  <div class="b">
    <div class="b1">
      <button class="prev">
        <span>previous</span>
      </button>
      <button class="nxt">
        <span>next</span>
      </button>
    </div>
  </div>
</div>

Answer 3

主要问题是您的 CSS
这里我创建了一个JSFiddle并稍微更新了您的 CSS ：

.b {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    margin: auto;
    width: 100%;
  }
 .b1 > button {
    background: rgba(0, 0, 0, 0) url(http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png) no-repeat scroll 0 0;
    position: absolute;
    top:0;
    height:25px;
    width:25px;
    margin:0;
    padding:0;
    text-indent: -999px;
    overflow: hidden;
    border: none;
    display: inline-block;
  }
.prev {
    left: 0;
}
.nxt {
    right: 0;
}

这将输出为：

如果您调整浏览器窗口的大小，则在next和prev按钮的此位置不会更改。
希望它对你有用。

把一个图像贴在另一个

3 个答案: