将div放置在滑动Jquery div的顶部。

Question

我试图定位一个#句柄的子div，在#句柄的顶部，这是一个上下滑动的div。我现在正在做的事情是：

​

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

​

我不知道定位是如何工作的，同时仍能将抽屉上下滑动。这是我可以通过定位属性或z索引完成的事情吗？谢谢。

Answer 1

关于第一个问题：

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

height: calc(100% - 30px);

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有一个设置为0.1px的font-size属性。您只需添加一条规则：

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

​