Блог

Главная - Вопросы по программированию - Расположите div поверх скользящего Jquery div

Расположите div поверх скользящего Jquery div

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь расположить дочерний div #handle поверх #handle, который представляет собой 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-индекса? Спасибо.

Ответ №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 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;
}  
 <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>

Комментарии:

1. Я, честно говоря, понятия не имел, что эта функция существует. Спасибо! Есть идеи, как бы я разместил дочерний элемент #handle сверху?

2. Ах, вы хотите, чтобы дочерний элемент находился на подвижной панели или в верхней части контейнера?

3. Да, сэр, я изменю вопрос, чтобы придать ему больше смысла.

4. Изменил мой ответ.

5. Ты потрясающий. Спасибо!