Keep divs at fixed position within dialog

Question

At the top and bottom of the visible area of the jQueryUI dialog I have divs, represented by the gray boxes, the .nav elements in the snippet, and I want them to remain in a fixed position when you scroll within the dialog. I set position: absolute for the gray boxes, yet they still scroll with the rest of the content in the dialog. How can I keep them at a fixed position within the dialog?

$(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>

Rel: http://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div — SEUH, Jul 21 '16 at 23:22

dNitro · Accepted Answer · 2016-07-21T23:38:54.563

Add the following inline style to your wrapper and regulate top to position top nav correctly:

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

and:

.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>

Thanks. Is there a way to do this without doing ```top: 45px```? — user2233706, Jul 22 '16 at 14:55

Keep divs at fixed position within dialog

1 Answers1