Sensei

Это не баг. По спеке, я так понимаю, есть такое понятие как Canvas, область, на которой происходит рендеринг. Этот холст имеет размеры области просмотра и берет фон у элемента HTML. А элемент HTML, если у него не задан фон, берет его у элемента BODY. Вот и получается, что фон на весь экран.

По спецификации алгоритм такой - преобразовываем выражение к значению Boolean - если результат равен true возвращаем false - возвращаем true Можно представить в виде функции var not = function(expr) { expr = !!expr; if (expr === true) return false; return true; };not(1 > 2); // truenot(1 < 2); // false

Свойство offsetWidth берется у мячика, а не у поля.

Есть событие ended https://jsfiddle.net/exacjuvc/

Если у элемента позиционирование отличное от static и задан z-index, формируется новый контекст наложения, в котором этот элемент будет корневым. Контекст, как стакан, дном которого служит корневой элемент, а все дочерние элементы располагаются внутри этого стакана в определенном порядке. Элементы даже с отрицательным z-index не могут быть расположены за корневым элементом, и лежат на самом дне стакана. В общем, нужно убрать у ссылок z-index ul a { z-index: auto;}

А так? function layers_box_open(o) { var item = $(o), _id = item.attr('data-layersLink-key'); if (_id) { var target = $('.js-layers_key-' + _id + ' .layers_box'), top = item.offset().top - $(".js-layers_wrap").offset().top, shift = target.outerHeight() / 2 - item.outerHeight() / 2; $('.layers_box_wrap', '.js-layers_key-' + _id).css({ 'visibility':'visible', 'top' : top + 'px', 'margin-top': '-' + shift + 'px' }); }}

Странно, я свой код запускаю в консоли, и блоки по центру пункта появляются.

Так решилась проблема-то?

Тултип же должен позиционироваться относительно пункта, а не всего списка)

Попробуйте так function layers_box_open(o) { var _id = $(o).attr('data-layersLink-key'); if (_id) { var target = $('.js-layers_key-' + _id + ' .layers_box'), top = ($("[data-layersLink-key='"+_id+"']").offset().top - $(".js-layers_wrap").offset().top), shift = target.outerHeight() / 2 - o.outerHeight() / 2; $('.layers_box_wrap', '.js-layers_key-' + _id).css({ 'visibility':'visible', 'top' : top + 'px', 'margin-top': '-' + shift + 'px' }); }}А вообще, если есть возможность менять разметку, лучше перенести тултипы внутрь самих пунктов. Код заметно упростится, нужно будет только отрицательный верхний отступ скриптом выставлять. А если не нужен ие8, то вообще одними стилями можно будет обойтись.

Кое-кто может взять с полки банан, если продолжит в том же духе вести диалог =) Ну, или как минимум не получить помощи на этом форуме.

Наверное, имелось в виду «автоматизировать»

Покажите ваш код.

Так? http://jsfiddle.net/rgv9n1k4/

Точку с запятой уберите из условия цикла. Увеличиваете индекс до обращения к массиву. Соответственно, элемент с индексом ноль выведен не будет.

http://jsfiddle.net/Lrhwmfps/1/

Вот такая замечательная особенность флекса) http://www.w3.org/TR/css-flexbox/#main-alignment

Так сойдёт? http://jsfiddle.net/w1yesyq5/

http://codepen.io/anon/pen/PPybbE

Можно скомбинировать. Вот, например, модуль для «ноды» https://www.npmjs.com/package/group-css-media-queries Или для систем сборки https://www.npmjs.com/package/gulp-combine-media-queries https://www.npmjs.com/package/grunt-combine-media-queries

Предпоследний абзац этого раздела http://www.w3.org/TR/css3-box/#overflow Можно с помощью js это проверить http://jsfiddle.net/t3oehygk/

По спецификации такая комбинация некорректна, поэтому значение «visible» игнорируется и меняется на «auto». Как вариант, можно использовать дополнительный элемент http://jsfiddle.net/5g9c3uxj/

http://jsfiddle.net/ko542jer/2/

В статье «display: inline;» описывается как альтернатива «float» в случае, когда высота элементов может быть разной. Воспринимайте эту часть статьи как примечание.

В вашем случае указание свойства «display» не имеет никакого смысла. Если у элемента задано «float», то он становится блочным, даже если вы явно указываете другое. В общем, уберите «float», и элементы станут строчными.