位置相对底部不起作用

我能够从顶部位置一个div，但是当我使用bottom :20%不起作用。我试图给position:fixed到那个div，我用bottom: 20%时间div高度增加，如果我拖动。位置相对底部不起作用

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

来源

2017-09-07 VAMSEE MOHAN KRISHNA

我真的不明白什么是预期的结果 –

再看看你元素和t他为你选择了他们的选择器 - 我感觉某些类和ID归因于错误的元素（即：嵌套元素而不是父元素）。 – UncaughtTypeError

希望这有助于你。

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

来源

2017-09-07 07:49:47 PraveenKumar

应用#containment-wrapperposition:relative和有孩子的为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>

来源

2017-09-07 07:55:29

位置相对底部不起作用

回答

相关问题