将div放在滑动Jquery div的顶部
[英]Position a div on top of a sliding Jquery div
问题描述
I'm trying to position a child div of #handle, on top of #handle, which is a div that slides up and down. 
我正在尝试将#handle的子div放置在#handle的上方，该子div可以上下滑动。 Here's what I'm working with right now: 这是我现在正在使用的内容：
$(document).ready(function() { $(".resizable").resizable({ handles: { 'n': '#handle' } }); });
body { height: 1000px; } #container { width: 100%; background: #555; height: calc(100% - 30px); position: fixed !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; } #handle { width: 100%; height: 30px; top: -29px; background-color: #fff; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.24); }
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="container" class="resizable"> <div id="handle" class="ui-resizable-handle ui-resizable-n">CONTENT</div> </div>
I can't figure out how the positioning would work, while still being able to slide the drawer up and down. 我无法弄清楚定位的工作原理，但仍然可以上下滑动抽屉。 Is this something I can accomplish with positioning properties or z-index? 我可以通过定位属性或z-index完成此操作吗？ Thanks. 谢谢。
1 个解决方案
解决方案1
0 已采纳 2016-10-04 14:22:21
For the first question: 对于第一个问题：
For the #container element, modify the height rule to: 对于#container元素，将height规则修改为：
height: calc(100% - 30px);
The calc() function is supported in most browers . 大多数浏览器都支持calc()函数。
Example: 例：
$(document).ready(function() { $(".resizable").resizable({ handles: { 'n': '#handle' } }); });
body { height: 1000px; } #container { width: 100%; background: #555; height: calc(100% - 30px); position: fixed !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; } #handle { width: 100%; height: 30px; top: -29px; background-color: #fff; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.24); }
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="container" class="resizable"> <div id="handle" class="ui-resizable-handle ui-resizable-n">CONTENT</div> </div>
For the second question 对于第二个问题
The problem is that .ui-resizable-handle has a font-size property that is set to 0.1px . 问题是.ui-resizable-handle的font-size属性设置为0.1px 。 You only need to add a rule: 您只需要添加一条规则：
#handle div {
font-size: 12px;
}
$(document).ready(function() { $(".resizable").resizable({ handles: { 'n': '#handle' } }); });
body { height: 1000px; } #container { width: 100%; background: #555; height: calc(100% - 30px); position: fixed !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; } #handle { width: 100%; height: 30px; top: -29px; background-color: #fff; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.24); } #handle div { font-size: 12px; }
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="container" class="resizable"> <div id="handle" class="ui-resizable-handle ui-resizable-n"> <div>content</div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.