Иногда функционала имеющихся в HTML элементов управления не хватает. И приходится создавать свой элемент управления при помощи JavaScript.
Конечно любой разработчик стремиться реализовать свое детище с наименьшими усилиями и количеством кода. Большое количество не только дольше писать, но и труднее поддерживать. Чем сложнее программный продукт в целом, тем сложнее делать код простым. Когда добавляются новые и новые возможности приходится многое держать в голове, чтобы и старые и новые вещи работали. Поэтому очень важно при добавлении новых возможностей делать архитектуру web-приложения такой, чтобы можно было сосредотачиваться на отдельных вещах и не держать в голове работу всего сервиса.Вступление было большим, но в статье пойдет речь об очень маленьком, но полезном трюке. Вполне наглядным примером будет рассказ о том как реализовать комбинированный список (ComboBox). Это элемент имеющий признаки выпадающего списка и поля редактирования. Выпадающий список с редактированием.
Описывается это только для демонстрации трюка. Трюк служит для позиционирования элементов списка сразу под полем ввода.
Как это сделать? Можно конечно просто сделать блок с абсолютным позиционированием и выставить для него координаты так, чтобы он находился под полем редактирования. Данный способ работает, но он имеет как минимум один недостаток. Недостаток  который имеет место именно при наличии сложного интерфейса, где на форме присутвуют области, которые можно двигать. DashBoards  если хотите. При способе определенном выше, если вдруг пользователь воспользуются перетаскиванием и переместит виджет в другие координаты, то выпавший до этого список вам тоже придется двигать. И вам придется писать дополнительный код. Придется его отлаживать. Придется думать о нескольких вещах сразу.
Но есть альтернатива. Трюк, о котором пойдет речь, основан в общем-то на простом принципе.
Принцип таков: Если элемент имеет абсолютное позиционирование, то координаты, указанные в css-свойствах top и left, задают его позицию относительно верхнего левого угла документа. Но если его родительский элемент так же имеет абсолютное или относительное позиционирование, то координаты этого элемента уже отсчитываются от левого верхнего угла родителя.

Это просто. Под полем ввода надо просто расположить div. Это будет якорь (или вешалка) для выпадающего списка. Ему надо задать абсолютноне позиционирование и координаты top=0, left=0. Этим мы добъемся чтобы родитель элемента списка был позиционирован, но оставался на месте при этом. Теперь внутри этого якоря расположим div, который будет содержать пункты списка. Этот div будет у нас иметь абсолютное позиционирование и нулевые координаты. По описанному выше правилу он будет находиться  прямо под полем ввода. Добавим ему свойство zIndex, так чтобы он перекрывал элементы находящиеся в нормальном потоке под полем ввода. Все. Теперь при перетаскивании выпадающий списко не надо в коде переностить в новые координаты. Он будет перетаскиваться вместе с полем.