将div放在滑动Jquery div的顶部

Question

我试图将#handle的子div放在#handle之上，这是一个上下滑动的div。这就是我现在正在做的事情：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".resizable").resizable({
    handles: {
      'n': '#handle'
    }
  });
});

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法弄清楚定位是如何工作的，同时仍然可以上下滑动抽屉。这是我可以通过定位属性或z-index完成的事情吗？感谢。

Answer 1

对于第一个问题：

对于#container元素，请将height规则修改为：

height: calc(100% - 30px);

most browers支持calc()功能。

示例：

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

对于第二个问题

问题是.ui-resizable-handle的{​​{1}}属性设置为font-size。您只需要添加规则：

0.1px

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