相对于底部的位置不起作用

Question

我可以从顶部定位一个div，但是当我使用bottom :20%时，它无效。我尝试将position:fixed提供给我使用bottom: 20%的div，如果我拖动的话，时间div高度会增加。

＆＃13;

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

希望这会对你有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

应用#containment-wrapper position:relative并将孩子视为position:absolute

＆＃13;

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;