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不存在。显示屏具有阻止，内联，无，内联阻止等选项。

此外，如果您使用类似的边距，则可能未正确编码。如果您希望将其用作行内元素，我将使用自动页边距进行研究并进行浮动。

编辑：看到您的评论，并且由于您需要临时解决方案，因此可以在单击按钮时向上移动按钮。

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

Answer 2

您要在哪里显示图片？我可以看到一个按钮，以及一个内容div大小（300 * 365），下面是您的图片。

不要为图像设置任何空白，它将显示出来。

打开按钮时停止图像移动

2 个答案: