Enable Jquery Containment without using position: relative I was trying to constrain ui-modal-dialog closed by the "body" of html using Jquery's constrainment. I thought it was possible to just set .draggable( { containment: 'body' }): However, ui-modal-dialog always escapes and I can overscroll more than containment area such as "body" in this case( I also tried some rectangle [0, 0, 1024, 768] though, ui-modal-dialog can break its boundary). Now, I set the position: relative in the "html" and "body" in the code and it seems work so far. 

My question is that I can use draggable({containment: some-container}) for constraining the ui-modal-dialog  without using relative: position.? 

My JS fiddle: Containment not working 

https://jsfiddle.net/kimihiro/qmgs37re/

My JS fiddle: Containment with position: relative in  "html" and "body" of styling Jquery.

https://jsfiddle.net/kimihiro/jtb3yhs8/

The same "Containment not working" code is below but not working here...



$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
   _title: function(title) {
     if (!this.options.title) {
       title.html("&amp;#160;");
     } else {
       title.html(this.options.title);
     }
   }
 }));
 $("#dialog").dialog({
   autoOpen: false,
   　　height: 300,
   width: 830,
   dialogClass: 'myTitleClass',
   modal: true,

   title: "Carpe Diem. Nunca Acredito Posteiro",
   closeOnEscape: false,
   open: function(event, ui) {
     $('.ui-dialog-titlebar-close', ui.dialog | ui);
   },


   buttons: {

     "Save": function() {
       $(this).trigger(updateKeyword());
     }
   }
 }).draggable({ containment: 'body' });

 $("#opener").click(function() {
   $("#dialog").dialog("open");
 });
input#opener {
  height: 30px;
  width: 200px;
  left: 50%;
  margin-top: -15px;
  /* = -height / 2   */
  margin-left: -100px;
  /* = -width / 2    */
  position: fixed;
  top: 80%;
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-style: Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  border-style: outset;
  display: flex;
  transition: .5s ease;
  vertical-align: middle;
  justify-content: center;
}

.myTitleClass .ui-dialog-title {
  white-space: normal;
}

.myTitleClass .ui-dialog-titlebar {
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  height: 60px;
}

.myTitleClass .ui-widget-content .ui-state-default {
  background-image: none;
  background-color: rgba(4, 115, 184, 0.6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.myTitleClass .ui-widget-content .ui-state-hover {
  background-image: none;
  background-color: rgb(4, 127, 184);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.ui-widget-overlay {
  position: fixed;
  background: black;
}

.myTitleClass .ui-dialog-titlebar-close {
  background: rgba(4, 115, 184, 0.9);
  border-radius: 17px;
  height: 33px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -28px;
  top: -24%;
  width: 33px;
}

.myTitleClass.ui-icon-close {
  background: url("http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png");
}

.ui-dialog {
  overflow: visible;
}

#footer {
  background: #0473b8;
  color: #fff;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
}
html {
  height: 100%;
   overflow-x: hidden;

}

body {
  height: 100%;
  overflow: hidden;
  
}

}
&lt;script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
&lt;input type="button" id="opener" value="Register Keyword"&gt;
&lt;/button&gt;
&lt;div id="dialog"&gt;Merry Christmas.
&lt;/div&gt;
&lt;div id="footer"&gt;footer&lt;/div&gt;
In Firefox Dev edition your original code worked fine unless I a) resized the dialog or b) the body was too small for the dialog. The fix for each is to set the containment on the resizable widget too and don't let the dialog start out larger than the body to begin with, respectively.

var maxWidth = $('body').width() - 20;
var maxHeight = $('body').height() - 20;
$("#dialog").dialog({
  autoOpen: false,
  height: maxHeight &gt; 300 ? 300 : maxHeight,
  width: maxWidth &gt; 830 ? 830 : maxWidth,
  dialogClass: 'myTitleClass',
  modal: true,
  draggable: true,
  title: "Carpe Diem. Nunca Acredito Posteiro",
  closeOnEscape: false,
  open: function(event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui);
  },
  buttons: {
    "Save": function() {
      $(this).trigger(updateKeyword());
    }
  }
}).draggable({
  containment: 'body'
}).resizable({
  containment: 'body'
});


Here's the updated fiddle.