title: JQuery UI Slider Positioning
body: <p>I am using the slider from <a href="http://jqueryui.com/slider/" rel="nofollow">http://jqueryui.com/slider/</a> , especially the fixed slider. I want to move this slider down to the bottom of the page, but when I tried to set margin-bottom: 5px  in the .ui-slider and ui-slider-range-min, nothing happens. Can somebody please assist me?</p>
  
  <pre><code>.ui-slider {
  position: relative;
  text-align: left;
  margin-bottom: 5px;
  }
  .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  }
  .ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
  }
  
  /* For IE8 - See #6727 */
  .ui-slider.ui-state-disabled .ui-slider-handle,
  .ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
  }
  
  .ui-slider-horizontal {
  height: .8em;
  }
  .ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
  }
  .ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
  }
  .ui-slider-horizontal .ui-slider-range-min {
  left: 0;
  margin-bottom: 5px;
  }
  .ui-slider-horizontal .ui-slider-range-max {
  right: 0;
  }
  
  .ui-slider-vertical {
  width: .8em;
  height: 100px;
  }
  .ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-left: 0;
  margin-bottom: -.6em;
  }
  .ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
  }
  .ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
  }
  .ui-slider-vertical .ui-slider-range-max {
  top: 0;
  }
  </code></pre>