Javascript 可单击的表单图像卡在Div下方

我有两个来回的箭头，可以点击在我的一页网站上的一个框架中的照片中移动。我的术语在这里可能不正确。保存照片和前后箭头的div显示在我的屏幕下方，而不是屏幕场景div中。我可以向上移动图像以显示在屏幕场景中，但不能显示箭头。即使我移动箭头，div也会固定在屏幕下方，如果这有意义的话。因此，当我缩小屏幕宽度时，图像的宽度会缩放，但div的高度不会缩放。我想让整个images div出现在屏幕场景中并正确缩放，并将箭头移动到照片右上角，照片框外。有人能告诉我怎么解决这个问题吗

var图像=[
“squirrel.jpg”，
“ewes.jpg”，
];
函数slideShowForward（）{
images.push（images.shift（））；
document.getElementById（'images'）.style.backgroundImage='url（'+images[0]+'）；
}
函数slideShowBack（）{
images.unshift（images.pop（））；
document.getElementById（'images'）.style.backgroundImage='url（'+images[0]+'）；
}

/*公文包页面
--------------------------------------------- */
#公文包页面{
宽度：100%；
高度：100vh！重要；
浮动：左；
}
#端口-pic-1{
宽度：100%；
高度：100vh！重要；
浮动：左；
背景：url（“justgrass.jpg”）不重复；
背景尺寸：封面；
位置：相对位置；
z指数：-5；
}
#端口-pic-2{
宽度：100%；
高度：100vh！重要；
浮动：左；
背景：url（“port-pic-2.jpg”）不重复；
背景尺寸：封面；
显示：无；
位置：相对位置；
z指数：-5；
}
#灰块{
背景颜色：灰色；
宽度：100%；
高度：67px；
}
#图像{
背景图片：url（'giraffe.jpg'）；
边框：1px纯红；
背景尺寸：包含；
背景重复：无重复；
宽度：23%；
最小宽度：200px；
利润率：8%010%；
}
​

下面是一个包含当前代码的JSFIDLE：

您当前正在做的事情

对于当前布局，您已尝试使用
#port-pic-1{float:left；}
从页面流中删除块，以便
#images
块在页面上的位置更高

为什么这不起作用

块元素（
）忽略浮动元素并按您希望的方式定位它们自己，但内联元素（
）则不这样做。它们漂浮在漂浮的元素周围

可能的修复

有许多不同的方法可以定位箭头按钮。我要做的是删除float属性，并使用按钮的绝对位置

HTML

把这个放到JSFIDLE中会有很大帮助。嗨——对不起，我不太擅长这个！我不知道JSFIDLE是什么。对于所有试图解决这个问题的人，除了这里，我不知道在哪里回复你。感谢您尝试提供帮助，但它不起作用和/或我错过了您的编辑出现的位置（从这一点来看，无法看到编辑或我错过了它们的位置）。是用于发布可执行代码段的网站。如果你能把你的代码放进这个网站，保存并粘贴链接到这里，我们将很容易看到你的问题并解决它。谢谢，威尔。我尝试了JSFIDLE网站，但单击“运行”时只显示代码。我想我还不知道如何使用StackOverflow或fsfiddle，但谢谢你回答我的问题。嗨，威尔，谢谢你制作了一个jsfiddle并解释了块元素。我用你的代码替换了我的代码，但是我的页面已经被试图修复的其他东西塞满了，什么都没用。这里有一个jsfiddle：我最终使用了什么（run=？）。事实上，我把箭头留在了图片中，从互联网上添加了一些javascript，现在有一个图片框，位于右边的页面上，但高度非常长。婴儿步。非常感谢您的帮助和我保存的优秀信息。
<div id="portfolio-page">
 <div id="port-pic-1">
   <div id="grey-block"></div>
   <div id="images" style="max-width:100%; height:auto;">
     <div class="form">
       <img src="http://placehold.it/50x50" alt="left" onclick="slideShowBack();" style="width: 39px; height: 34px;" />
       <img src="http://placehold.it/50x50" alt="right" onclick="slideShowForward();" style="width: 39px; height: 34px;" />
     </div>
   </div>
 </div>
</div> 

#port-pic-1 {
  width: 100%;
  height: 100vh !important;
  background: url("http://placehold.it/400x400") no-repeat;
  background-size: cover;
  position: relative;
  z-index: -5;
}

#images {
  background-image: url('giraffe.jpg');
  border: 1px solid red;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 8%;
  left: 10%;
}