相对位置，底部不起作用

Question

I am able to position one div from top,but when i am using bottom :20% is not working. I tried to give position:fixed to that div where i used bottom: 20% that time div height increases if I am dragging.

 $( function() { $( "#draggable1,#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false }); }); 

 #containment-wrapper { width: 95%; height: 400px; border: 2px solid #ccc; padding: 10px; } h3 { clear: left; } .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable1 { position: relative; border: 2px solid black; top: 20%; } #draggable2 { position: relative; border: 2px solid black; bottom: 20%; } 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="containment-wrapper"> <div id="draggable1" class="draggable ui-widget-content"> <p>I'm from top 20%</p> </div> <div class="draggable ui-widget-content"> <p id="draggable2" class="ui-widget-header">I'm from bottom 20%</p> </div> </div> 

Answer 1

Hope this helps you.

 $( function() { $( "#draggable1,#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false }); }); 

 #containment-wrapper { width: 95%; height: 400px; border: 2px solid #ccc; padding: 10px; position: relative; } h3 { clear: left; } .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable1 { position: absolute; border: 2px solid black; top: 20%; } #draggable2 { position: absolute; border: 2px solid black; bottom: 20%; } 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="containment-wrapper"> <div id="draggable1" class="draggable ui-widget-content"> <p>I'm from top 20%</p> </div> <div id="draggable2" class="draggable ui-widget-content"> <p>I'm from bottom 20%</p> </div> </div> 

Answer 2

Apply #containment-wrapper position:relative and there child's as position:absolute

 $( function() { $( "#draggable1,#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false }); }); 

 #containment-wrapper { position: relative; width: 95%; height: 400px; border: 2px solid #ccc; padding: 10px; background-color: #ccc; } h3 { clear: left; } .draggable { width: 90px; height: 90px; padding: 0.5em; margin: 0 10px 10px 0; } #draggable1 { position: absolute; border: 2px solid black; top: 20%; } #draggable2 { position: absolute; border: 2px solid black; left: 20%; bottom: 20%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div id="containment-wrapper"> <div id="draggable1" class="draggable ui-widget-content"> <p>I'm from top 20%</p> </div> <div id="draggable2" class="draggable ui-widget-content"> <p>I'm from bottom 20%</p> </div> </div>