Динамически расположите div в верхнем левом углу изменяемого размера элемента в JQuery UI

Question

Я создаю собственный стиль для интерфейса Draggable пользовательского интерфейса JQuery, который вы можете увидеть здесь:

http://psdesignzone.com/help/Designer.html

У меня возникают проблемы при работе раздела NW-Resizeсправа, если вы посмотрите в верхнем левом углу окна (например, класс North West Resizable), вы увидите, что он расположен относительно в начале и выглядит хорошо, но когда вы изменяете размер окна, все становится запутанным.

Я не могу придумать, как заставить его всегда располагаться в нужном месте (поскольку он генерируется динамически, я тоже не могу изменить фактический HTML.

Answer 1

Это должно сработать.В .ui-resizable-nw измените position:relative на position:absolute и измените top:-166px на top:-10px.

Пример в реальном времени: http://jsfiddle.net/tw16/DNnSm/

.ui-resizable-nw {
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #666;
    border-width: 1px 0 0 1px;
    position: absolute; /* changed from relative */
    top: -10px; /* changed from -166px */
    left: -10px;
    cursor: nw-resize;
}