Question

我正在尝试集成here中的代码，以更改点击时幻灯片显示的图像（贷记为cssyphus）：

$(function() {
  $("input:button").click(function() {
    $("img:last").fadeToggle("slow", function() {
      $(this).prependTo(".frame").fadeIn()
    });
  });
});

function Forward() {
  $("img:first").fadeToggle("slow", function() {
    $(this).appendTo(".frame").fadeIn(800)
  });
}

function Backward() {
  $("img:last").fadeToggle("slow", function() {
    $(this).prependTo(".frame").fadeIn()
  });
}

.frame {
  position: relative;
  left: 35%;
}

img {
  position: absolute;
  max-width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>
  <input type="button" value="PrependTo" />
  <button onclick="Forward()">Go Forward</button>
  <button onclick="Backward()">Go Backward</button>

</h1>
<div class="frame">
  <img src="http://placeimg.com/240/180/animals">
  <img src="http://placeimg.com/240/180/nature">
  <img src="http://placeimg.com/240/180/people">
  <img src="http://placeimg.com/240/180/sepia">
</div>

此问题的出现是由于position:absolute依赖于将图像堆叠在一起的影响。将其切换为position:relative即可堆叠图像，并且它们彼此相邻。使用position:absolute会引发代码中所有其他要集成的元素。我该如何解决这个问题？

Answer 1

很难想象幻灯片会如何影响布局，但是通过查看代码，我可以尝试以下两种方法之一：

从left: 35%;中删除.frame css-我不确定为什么这样做，但是它将把幻灯片的整个帧容器推到上方
```
.frame {
    position: relative;
}
```
调整img的CSS，使其仅影响第一个孩子之后的第n个孩子，因此当第一个孩子是继承/相对对象时，它们会彼此堆叠：
```
img {
    position: relative;
}
img:nth-child(n+2) {
    position: absolute;
    top: 0;
    left: 0;
}
```

相对位置如何使图像褪色？

1 个答案: