javascript - 将 div 保持在对话框中的固定位置

Question

在 jQueryUI 对话框可见区域的顶部和底部，我有 div，由灰色框表示，代码段中的 .nav 元素，我希望它们保持固定在对话框中滚动时的位置。我为灰色框设置了 position: absolute，但它们仍然与对话框中的其余内容一起滚动。如何将它们保持在对话框中的固定位置？

$(document).ready(function() {
	var opts = {
  	modal: true,
    height:300,
  };
  
  $('#wrapper').dialog(opts);
  $('#wrapper').dialog('open');

});

.images {
  z-index: 1;
}

.image {
  display: inline-block;
  border: 1px solid black;
  width: 100%;
  height: 500px;
}

.nav {
  width: 90%;
  height: 30px;
  z-index: 2;
  background-color: rgba(192, 192, 192, 0.7);
  position: absolute;
}

.top {
  top: 0px;
}

.bottom {
  bottom: 0px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id='wrapper'>
  <div class='top nav'>
  </div>

  <div class='bottom nav'>
  </div>

  <div class='images'>
    <div class='image'>
    </div>

    <div class='image'>
    </div>

    <div class='image'>
    </div>
  </div>

</div>

Answer 1

将以下内联样式添加到您的包装器并调整top以正确定位顶部导航:

<div id='wrapper' style='position: static;'>

和:

.top {
  top: 45px;
}

$(document).ready(function() {
	var opts = {
  	modal: true,
    height:300,
  };
  
  $('#wrapper').dialog(opts);
  $('#wrapper').dialog('open');

});

.images {
  z-index: 1;
}

.image {
  display: inline-block;
  border: 1px solid black;
  width: 100%;
  height: 500px;
}

.nav {
  width: 90%;
  height: 30px;
  z-index: 2;
  background-color: rgba(192, 192, 192, 0.7);
  position: absolute;
}

.top {
  top: 45px;
}

.bottom {
  bottom: 0px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id='wrapper' style='position: static'>
  <div class='top nav'>
  </div>

  <div class='bottom nav'>
  </div>

  <div class='images'>
    <div class='image'>
    </div>

    <div class='image'>
    </div>

    <div class='image'>
    </div>
  </div>

</div>