jQuery изменяемый размер дескриптора z-index

Я заметил, что дескрипторы изменяемого размера пользовательского интерфейса jQuery находятся поверх всех остальных элементов на странице. Я проверил с помощью инструментов разработчика Chrome и увидел, что им автоматически присваивается z-индекс 1001. Есть ли способ отключить это и просто присвоить им тот же z-индекс, что и у элемента с изменяемым размером? Спасибо.


javascript jquery-ui-resizable
person SZH    schedule 12.01.2011    source источник

Ответы (5)


arrow_upward
5
arrow_downward

z-index устанавливается с помощью CSS, а не JavaScript. Вам нужно будет отредактировать ответственный CSS, в этом случае:

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

Или определите свое собственное правило, чтобы переопределить поведение. Дополнительную информацию см. на этой странице: http://www.mail-archive.com/[email protected]/msg09524.html

person Chris Laplante    schedule 12.01.2011
comment
Спасибо! Это сработало: .ui-resizable-handle { z-index: auto !important; } - person SZH; 12.01.2011

arrow_upward
13
arrow_downward

Для меня это работает лучше всего, потому что без !important правило перезаписывается.

.ui-resizable-handle { z-index: auto !important; }
person Sven    schedule 16.08.2012

arrow_upward
2
arrow_downward

Для нас это был самый удобный и наименее хакерский способ переопределить настройки по умолчанию для объектов jQuery-ui. Вы можете заменить компонент «изменяемого размера» любым из их компонентов. Просто убедитесь, что это выполняется после загрузки jQuery, но до вызова $(element).resziable().

$.extend($.ui.resizable.prototype.options, {zIndex: 2147483647});

person Scott    schedule 31.01.2014

arrow_upward
2
arrow_downward

вместо того, чтобы помещать важные правила z-index в свой CSS, вы можете просто удалить эту опцию из прототипа с изменяемым размером, и тогда все дескрипторы получат z-index, который вы определяете в своем CSS. обычно вам даже не нужно его определять.

// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables

delete $.ui.resizable.prototype.options.zIndex;
person Pascal    schedule 17.12.2014

arrow_upward
1
arrow_downward

На самом деле, jQuery UI 1.12.1 Resizable изменяет размер z-index по умолчанию 90.

Это не задокументировано, но мы можем его инициализировать:

$(element).resizable({
  zIndex: 0,
});


// Red one, resizer appears through foreground divs
$("#w1").resizable(); // z-index resizer 90

// Gold one, no resizer appears through silver div
$("#w2").resizable({
  zIndex: 0, // z-index resizer 0
});
#w1, #w2, #w3 {
  position: absolute;
  width: 150px;
  height: 100px;
}

#w1 {
  left: 10px;
  top: 10px;
  background-color: red;
}

#w2 {
  left: 40px;
  top: 40px;
  background-color: gold;
}

#w3 {
  left: 70px;
  top: 70px;
  background-color: silver;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>

person JCH77    schedule 31.08.2018