javascript - 打开按钮时停止图像移动

Question

我希望图像在我打开按钮时停止向下移动。我尝试将图像的位置更改为固定，但随后图像从我的页面上消失了，我不确定它去了哪里。非常感谢任何有关如何解决此问题的建议。

.image3 {
  position: fixed;
}

.collapsible {
  background-color: #C5E3ED;
  color: black;
  padding: 15px;
  width: 400px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  font-family:apple chancery;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:5px;
}

.active, .collapsible:hover {
  background-color: #8bc7db;
}

.content {
  padding: 0 18px;
  max-height: 0;
  height: 300px;
  overflow: scroll;
  transition: max-height 0.2s ease-out;
  background-color: #C5E3ED;
  width: 365px;
}

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

  <button class="collapsible">title</button>
  <div class="content">
    <p>text</p>
  </div>
<img src="https://www.w3schools.com/Bootstrap/paris.jpg" alt="wolf" class="image3">

Answer 1

尝试使用 position:fixed 而不是 display:fixed。 display:fixed 不存在。 display 有 block、inline、none、inline-block 等选项。

另外，如果您使用这样的边距，您可能没有以正确的方式编码。如果您希望它成为内联元素，我会研究使用自动边距和 float 。

编辑:看到你的评论，因为你想要一个临时解决方案，你可以在点击按钮时向上移动它。

button:hover:active { margin-top:-5px; }